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 后面赋值如上

标签写入

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

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

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

videojs实现视频打点标记 Vue相关推荐

VideoJS实现视频直播（vue）
videojs官网: https://videojs.com/getting-started video.js安装使用videoJs前势必需要先安装videoJs,目前有两种方式可以使用: npm包 ...
91.video.ws index php_如何利用videojs实现视频列表循环播放（完整代码）
本篇文章给大家带来的内容是关于如何利用videojs实现视频列表循环播放(完整代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 庭审直播 .video-js { /* posit ...
vue怎么设置封面_微信朋友圈封面视频如何制作?微信朋友圈封面视频制作软件VUE功能介绍...
貌似最近挺火的,很多人都把朋友圈相册封面变成了小视频,有声音还可以动;那么微信朋友圈封面视频如何制作呢?下面请看微信朋友圈封面视频制作软件VUE功能介绍. 微信朋友圈封面视频制作软件:VUE VUE怎 ...
vue怎么设置封面_vue设置视频封面教程 vue如何修改标题
现在使用vue的伙伴很多,可以说是视频编辑美化软件排前几的软件,能够使用的功能非常多,有用户就想知道如何才能进行标题的修改,视频的封面又是怎么设置的,想知道的伙伴,可以在iefans看看详细的操作方法 ...
videojs实现视频列表点击播放下个视频
实现效果如下: 1.点击视频暂停或者播放,并显示中间按钮图标. 2.点击下方选集, 实现切换到下个视频. 3.点开视频默认自动播放. 代码参考:<!DOCTYPE html> <ht ...
VideoJS+HLS视频加密播放
前言前段时间遇到一个播放视频的项目,为了防止登录的用户下载项目的视频,所以需要对视频加密,即使用户下载也不能播放:因为前端采用videojs,最后确认方案是将mp4转m3u8文件格式,来实现视频文件 ...
基于 React video 视频打点
HTML <video> 元素用于在HTML或者XHTML文档中嵌入媒体播放器,用于支持文档内的视频播放. currentTime:读取 CurentTime 返回一个双精度浮点值,指示以 ...
video-js 删除视频列表中的某个视频后，重复初始化不成功问题（通过ID初始化）
问题:删除剪辑视频列表中的一个视频后,添加一个视频到列表,然后打开剪辑面板时,播放器video-js初始化失败,使用了浏览器默认的播放器. 原因(猜测):由于ID格式为"videoPlaye ...
利用videojs进行视频回放
最近换了新工作,公司用了现在比较流行的spring cloud微服务+vue实现前后端分离开发,由于之前都没有接触过vue,基本相当于从0开始,写下博客,记录下开发过程中的采坑之旅. 最近用到了vid ...

videojs实现视频打点标记 Vue

videojs实现视频打点标记 Vue

安装

页面引入

操作方法

使用

videojs实现视频打点标记 Vue相关推荐

最新文章

热门文章