video.js视频播放器进度条标记的功能实现

video.js视频播放器

接到个需求，需要一个视频播放页面，并且进度条需要在某个时间点打上标记。在网上找了一下，发现一个叫videojs-markers的包可以完成此项功能
实现效果图

安装

首先安装videojs:

npm install video.js

也可以到github下载

然后到下载视频标记包videojs-markers
marker download

引入

import 'video.js/dist/video-js.css'
import './assets/videoMaker/videojs-markers.js'
import './assets/videoMaker/videojs.markers.css'
import Video from 'video.js'
Vue.prototype.$video = Video

使用

<template>
  <div class="index-container">
    <video id="videoid" controls class="video-js vjs-default-skin vjs-big-play-centered">
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
  </video>
  </div>
</template>

<script>
export default {
 data () {
    return {
     video:""
           }
},
mounted(){
//创建一个视频对象
 this.video = this.$video('videoid',{
   width:800,
   height:450
 });

//创建标记对象
this.video.markers({
   markerTip:{
      text: function(marker) {
         return  marker.text;
      }
   },
   markers: [
     {time: 9.5, text: "事故发生之前300米",class: "white-marker-class"},
     {time: 16,  text: "事故发生点，2020年7月17日"},
     {time: 23.6,text: "事故发生后400米",class: "white-marker-class"},
  ]
});
 },
 
 //页面离开时销毁视频对象
 destroyed() {
    this.video.dispose()
  }
} 
</script>

具体videojs配置中文文档
具体videojs-markers配置文档