Vue使用video标签实现视频播放 Vue使用video标签实现视频播放

本文项目为大家分享了Vue使用video标签实现视频播放的具体代码，供大家参考，具体内容如下
项目需求：动态显示视频滚动条、禁止视频下载、播放时每5s更新当前时长、每10分钟暂停视频显示提示。
之前做视频播放时基本都是使用 vue-video-player 组件，其原因为封装功能齐全、播放源兼容性好等。
通过这次项目需求，也深入的学习了 video 标签的属性及方法。具体在这里跟大家分享一下。
具体使用方法如下

#common-video {position: relative; .video-box {box-sizing: border-box; border: 0; display: block; width: 100%; height: 100%; outline: none !important; }.isShow {//进度条video::-webkit-media-controls-timeline {display: none; }}video::-webkit-media-controls-play-button {visibility: hidden; }.operate-btn {display: block; width: 60px; height: 60px; position: absolute; top: calc(50% - 30px); left: calc(50% - 30px); }.operate-btn:hover {opacity: 0.8; }.fade-out {opacity: 0; }}

注：
1.使用 isShow 属性配合 css 样式动态展示视频滚动条
2.使用 video 标签的 οncοntextmenu=“return false” 属性来实现禁止下载
3.使用 video 标签的 @timeupdate=“timeupdate” 方法来时间视频播放进度监听
4.使用 vue 的 ref 属性为 video 标签绑定监听事件，来实现其他功能，如时长统计、延迟提示、动态显示图标播放按钮等功能。

【Vue使用video标签实现视频播放】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。