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初始化(此方法没法添加标记)
  在<video>标签里面加上class="video-js"和data-setup='{}'和controls属性。

  <video
      id="video"
      class="video-js vjs-big-play-centered"
      controls
      preload="auto"
      poster="//vjs.zencdn.net/v/oceans.png"
      width="600"
      height="400"
      data-setup='{}'
      >
    <source :src="videoSrc" type="video/mp4"/>
  </video>

• js初始化

  <video
      id="video"
      class="video-js vjs-big-play-centered"
      controls
      >
    <source :src="videoSrc" type="video/mp4"/>
 </video>
 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参数有没有，看看视频地址有没有

    <template>
      <div class="video">
      <div ref="videoBox"></div>
      </div>
    </template>
    <script>
      const video = `
        <video
          id="myvideo"
          controls
          class="video-js vjs-big-play-centered"
        >
          <source src="${this.videoSrc}" type="video/mp4" />
        </video>
        `
      this.$refs.videoBox.innerHTML = video
      this.player = videojs('myvideo', {
        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// 将音量横向改为纵向
          }
        }
      })
    this.player.markers({
        markerStyle: {
          // 标记样式
          width: '0.7em',
          height: '0.7em',
          bottom: '-0.15em',
          'border-radius': '50%',
          'background-color': 'orange',
          position: 'absolute'
        },
        markerTip: {
          display: false// 不显示标记的tip
        },
        markers: [
          {
            time: 9.5
          },
          {
            time: 16
          },
          {
            time: 23.6
          },
          {
            time: 28
          }
        ]
      })
     </script>

github:视频打点