videojs和videojsmarkers实现视频打点vueelement

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

1. 在 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 初始化

 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: 视频打点