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()