videojs实现视频打点标记 Vue

安装

npm install videojs
npm install videojs-markers

页面引入

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

操作方法

需求如需在页面添加打点

this.player.markers.add([{
    time: item.startTime,
    class: 'custom-marker-class',
    text: item.text + '开始',
    del: item.del
}])

从视频中的当前时间转到下一个标记

player.markers.next()

从视频中的当前时间转到上一个标记

player.markers.prev()

允许动态改变标记时间

 const markers = player.markers.getMarkers();
 const add_time = 10;
 for (let i = 0; i < markers.length; i++) {
     markers[i].time += add_time;
 }
 // 调用updateTime以立即反应UI中的更改
 player.markers.updateTime()

如需删除

// 根据索引删除某一个
this.player.markers.remove([index])

删除全部

this.player.markers.removeAll()

根据 升序时间排序 返回所有点

this.player.markers.getMarkers()

使用

data 里面初始化

options: {
  autoplay: 'muted', // 自动播放
  controls: true, // 用户可以与之交互的控件
  loop: true, // 视频一结束就重新开始
  muted: false, // 默认情况下将使所有音频静音
  playsinline: true,
  webkitPlaysinline: true,
  // aspectRatio:"16:9",//显示比率
  playbackRates: [0.5, 1, 1.5, 2],
  fullscreen: {
    options: { navigationUI: 'hide' }
  },
  // 如果你只有一个视频源也可以从这里设置
  sources: [
    {
      src: '/.mp4',
      type: 'video/mp4'
    }
  ]
},
player: null，
markersArray: []

methods 创建初始化函数

methods: {
     markers () {
      this.player = videojs(
        this.$refs.videoPlayer,
        this.options,
        function onPlayerReady () {
          console.log('onPlayerReady', this)
        }
      )
      // 设置标点
      this.player.markers({
        // 不显示鼠标悬浮标记提示文字
        markerTip: {
          display: true,
          text: function (marker) {
            return marker.text
          }
        },
        markerStyle: {
          width: '7px',
          'background-color': '#20bec3',
          'border-radius': '50%'
        },
        // 每个标记的中断覆盖选项
        breakOverlay: {
          // 是否显示叠加层
          display: true,
          displayTime: 3,
          // 为叠加层添加css样式
          style: {
            'color': '#20bec3'
          },
          // 回调函数动态构建叠加文本
          text: function (marker) {
            return marker.text
          }
        },
        // 只要播放到标记的时间间隔，就会出发此回调函数
        onMarkerReached: function (marker, index) {
          // console.log(marker)
          // console.log(index)
        },
        // 单击标记时会触发此回调函数，
        onMarkerClick: function (marker, index) {
          /*
            单击标记的默认行为是在视频中寻找该点，
            但是，如果onMarkerClick返回false，则将阻止默认行为
          */
          // console.log(marker)
          // console.log(index)
        },
        markers: this.markersArray
      })
    },   
}

引入在接口调用成功里面，标记 markers 数组在做切换时候一次性全部拿到数据，不然点位在进度条的位置不正确。提醒文字是好的。

切换视频时推荐使用

this.player.src(videoPath)

重新赋值标记数据时

this.player.markers.reset()

在第一次进入时，需在markers 后面赋值 如上

标签写入

<video
  style="height: 600px"
  ref="videoPlayer"
  class="video-js vjs-big-play-centered vjs-fluid"
>
</video>

实际中在同页面做切换视频并显示打点记录

// 可先销毁再初始化
this.player.markers.destroy()
this.markers()