admin 管理员组文章数量: 888299
videojs
安装
npm install videojs-markers引入 videojs-markers
import videojs from "video.js";
import "video.js/dist/video-js.css";
import "videojs-markers";
import "videojs-markers/dist/videojs.markers.css";
使用
// 初始化video.js
const player = videojs(document.getElementById("video"));// 加载标记
video.markers({// 修改标记样式markerStyle: {'width':'8px','background-color': 'red'},// 悬停标记提示对象markerTip:{ display:true, // 是否显示/*用于动态构建标记提示文本的回调函数。只需返回一个字符串，参数标记是传递给插件的标记对象*/text: (marker) => {return marker.text;},time: (marker) => {return marker.time;},},breakOverlay:{ // 每个标记的中断覆盖选项display: true, // 是否显示叠加层displayTime: 3,style:{ // 为叠加层添加css样式color:"red"},text: function(marker) { //回调函数动态构建叠加文本return "This is an break overlay: " + marker.text;}},/*单击标记的默认行为是在视频中寻找该点，但是，如果onMarkerClick返回false，则将阻止默认行为*/onMarkerClick: function (marker) {// 单击标记时会触发此回调函数console.log(marker);},onMarkerReached: function (marker) {// 只要播放到标记的时间间隔，就会出发此回调函数console.log(marker);},markers: [{time: 9.5, text: "this"},{time: 16, text: "is"},{time: 23.6,text: "so"},{time: 28, text: "cool"}]
});操作
-
返回插件中当前标记的数组，按升序时间排序
player.markers.getMarkers();-
从视频中的当前时间转到下一个标记。 如果没有下一个标记，那么什么都不做
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();- 删除给定索引数组中的标记（从0开始），空时删除全部
// player.markers.remove([1,3]);
// 删除所有标记
player.markers.removeAll();- 动态添加新标记
player.markers.add([{time: 40,text: ""
}]);-
重置视频中的所有标记（相当于removeAll后再设置）
player.markers.reset([{time: 40,text: " "
},
{time:20,text: " "
}]);本文标签： videojs
版权声明：本文标题：videojs 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/free/1699077426h326722.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论