vue video标签,vue-video-player文档
这篇文章主要为大家详细介绍了某视频剪辑软件使用录像标签实现视频播放，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文项目为大家分享了某视频剪辑软件使用录像标签实现视频播放的具体代码，供大家参考，具体内容如下
项目需求：动态显示视频滚动条、禁止视频下载、播放时每5s更新当前时长、每10分钟暂停视频显示提示。
之前做视频播放时基本都是使用视频播放器组件，其原因为封装功能齐全、播放源兼容性好等。
通过这次项目需求，也深入的学习了录像标签的属性及方法。具体在这里跟大家分享一下。
具体使用方法如下
模板
！-视频组件-
div id= common-video class= h-100
div:class= { isShow:control } class= h-100
录像
ref=我的视频
:poster=poster
:src=src
:controls=controls
oncontextmenu=return false
@timeupdate=timeupdate
controlslist=nodownload
视频盒
/视频
图片
src= @/assets/images/playtn。巴布亚新几内亚
alt=
@click=operateVideo
class=指针操作-btn
:class={ fade-out: videoState }
/
/div
/div
/模板
脚本
导出默认值{
名称：普通视频，
data() {
返回{
videoState: false，//视频播放状态
//学时
学习时间：{
当前时间：0,//当前已学时长
持续时间：0 //总时长
},
计时器：{},//定时器
暂停计时器：{} //暂停定时器
};
},
/**
* @param海报展示图
* @param src视频资源
* @param控件是否显示控件
* @param控件控件控制
* @param videoData视频基础数据
*/
道具：{
海报：{
类型：字符串，
必选：假，
默认值：""
},
src: {
类型：字符串，
必填：真
},
控件：{
类型：布尔型，
必选：假，
默认值：真
},
控制：{
类型：布尔型，
必选：假，
默认值：错误
},
视频数据：{
类型：对象，
必填：真
}
},
已安装(){
//监听视频播放
这个参考文献。我的视频。addevent侦听器( play ，()={
console.log(视频正在播放);
这个。open timer()；
});
//监听视频暂停
这个参考文献。我的视频。addevent侦听器( pause ，()={
console.log(视频已停止);
这个。关闭定时器()；
});
},
方法：{
//开启定时器
openTimer() {
this.timer=setInterval(()={
这个. emit(videoStudyTime)，这个。学习时间)；
}, 5000);
},
//关闭定时器
closeTimer() {
清除间隔(这个。定时器)；
这个. emit(videoStudyTime)，这个。学习时间)；
},
//开启暂停定时器
openPauseTimer() {
这个。pause timer=setInterval(()={
这个。提示operate()；
}, 600000);
},
//关闭暂停定时器
closePauseTimer() {
clearInterval(这个。暂停定时器)；
},
//提示操作
hintOperate() {
这个。操作视频()；
这个$alert(请点击确认继续学习, 提示, {
confirmButtonText:确定，
confirmButtonClass:提示-btn ，
showClose: false，
回调：操作={
这个参考文献。我的视频。当前时间=这个。视频数据。当前时间；
这个。操作视频()；
这个。openpausetimer()；
}
});
},
//获取当前播放位置
时间更新(e) {
这个。学习时间。当前时间=e .目标。当前时间；
这个。学习时间。持续时间=e .目标。持续时间？e。目标。持续时间：0;
},
//操作视频播放、暂停
operateVideo() {
如果(!this.src) {
这个message({ message:暂无视频资源，请查看其他视频!});
返回错误的
}
如果（这个. refs.myVideo.paused) {
这个参考文献。我的视频。play()；
this.videoState=true
}否则{
这个参考文献。我的视频。pause()；
this.videoState=false
}
}
},
观察：{
//监听操作
视频数据(瓦尔，老瓦尔){
const {当前时间，持续时间}=val
如果(当前持续时间当前持续时间){
这个。提示operate()；
}
}
}
};
/脚本
style lang=less
#普通视频{
位置：相对；视频盒{
框大小：边框-框；
边框：0;
显示：块；
宽度：100%;
身高：100%;
大纲：无！重要；
}。isShow {
//进度条
视频：-网络工具包-媒体-控件-时间线{
显示：无；
}
}
视频：-网络工具包-媒体-控件-播放-按钮{
可见性：隐藏；
}。operate-btn {
显示：块；
宽度：60px
高度：60px
位置：绝对；
top:calc(50%-30px)；
左：calc(50%-30px)；
}。operate-btn:hover {
不透明度：0.8;
}。淡出{
不透明度：0;
}
}
/风格
注：
1.使用是否显示属性配合钢性铸铁样式动态展示视频滚动条
2.使用录像标签的ntextmenu=" return false "属性来实现禁止下载
3.使用录像标签的@timeupdate="timeupdate "方法来时间视频播放进度监听
4.使用某视频剪辑软件的裁判员属性为录像标签绑定监听事件，来实现其他功能，如时长统计、延迟提示、动态显示图标播放按钮等功能。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。