videojs和videojs-markers实现视频打点(vue+element)

最近做了个项目需要给视频打点，故而查阅各方资料
参考：
vue项目如何引入video.js
video.js使用及问题
video.js使用技巧

1. 在vue项目中的vue文件引入video.js和videojs-markers

import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import 'videojs-markers'

1. videojs初始化

• html初始化(此方法没法添加标记)
  在标签里面加上class="video-js"和data-setup='{}'和controls属性。

• js初始化

  
 this.player = videojs('video', {
        controls: true, // 必填，显示各控制组件
        autoplay: false, // 是否自动播放
        preload: 'auto', // 预加载
        poster: 'http://vjs.zencdn.net/v/oceans.png', // 视频封面
        width: '600px',
        height: '400px',
        loop: true, // 是否循环播放
        playbackRates: [0.5, 1, 1.5, 2], // 是否显示倍速
        controlBar: {
          volumePanel: {
            inline: false// 将音量横向改为纵向
          }
        }
      })

• js动态初始化
  注意当视频播放不出来时，看看controls参数有没有，看看视频地址有没有

github:视频打点