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

具体内容如下

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

具体使用方法如下

<template><!-- Video组件 --><div id="common-video" class="h-100"><div :class="{ isShow: control }" class="h-100"><videoref="myVideo":poster="poster":src="src":controls="controls"oncontextmenu="return false"@timeupdate="timeupdate"controlslist="nodownload"class="video-box"></video><imgsrc="@/assets/images/playbtn.png"alt=""@click="operateVideo"class="pointer operate-btn":class="{ 'fade-out': videoState }"/></div></div>
</template><script>
export default {name: "CommonVideo",data() {return {videoState: false, // 视频播放状态// 学时studyTime: {currentTime: 0, // 当前已学时长duration: 0 // 总时长},timer: {}, // 定时器pauseTimer: {} // 暂停定时器};},/*** @param poster 展示图* @param src 视频资源* @param controls 是否显示控件* @param control 控件控制* @param videoData 视频基础数据*/props: {poster: {type: String,required: false,default: ""},src: {type: String,required: true},controls: {type: Boolean,required: false,default: true},control: {type: Boolean,required: false,default: false},videoData: {type: Object,required: true}},mounted() {// 监听视频播放this.$refs.myVideo.addEventListener("play", () => {console.log("video is playing");this.openTimer();});// 监听视频暂停this.$refs.myVideo.addEventListener("pause", () => {console.log("video is stop");this.closeTimer();});},methods: {// 开启定时器openTimer() {this.timer = setInterval(() => {this.$emit("videoStudyTime", this.studyTime);}, 5000);},// 关闭定时器closeTimer() {clearInterval(this.timer);this.$emit("videoStudyTime", this.studyTime);},// 开启暂停定时器openPauseTimer() {this.pauseTimer = setInterval(() => {this.hintOperate();}, 600000);},// 关闭暂停定时器closePauseTimer() {clearInterval(this.pauseTimer);},// 提示操作hintOperate() {this.operateVideo();this.$alert("请点击确认继续学习", "提示", {confirmButtonText: "确定",confirmButtonClass: "hint-btn",showClose: false,callback: action => {this.$refs.myVideo.currentTime = this.videoData.currentTime;this.operateVideo();this.openPauseTimer();}});},// 获取当前播放位置timeupdate(e) {this.studyTime.currentTime = e.target.currentTime;this.studyTime.duration = e.target.duration ? e.target.duration : 0;},// 操作视频播放、暂停operateVideo() {if (!this.src) {this.$message({ message: "暂无视频资源，请查看其他视频！" });return false;}if (this.$refs.myVideo.paused) {this.$refs.myVideo.play();this.videoState = true;} else {this.$refs.myVideo.pause();this.videoState = false;}}},watch: {// 监听操作videoData(val, oldVal) {const { currentTime, duration } = val;if (currentTime && duration && currentTime < duration) {this.hintOperate();}}}
};
</script><style lang="less">
#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;}
}
</style>

注：

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

以上是“Vue如何使用video标签实现视频播放”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！

Vue如何使用video标签实现视频播放相关推荐

vue使用原生video标签播放视频
页面效果如下图如果想实现自动播放,需要加autoplay属性, 但是加了之后也可能出现无法自动播放的问题,还需要在加muted属性 muted 是静音属性添加了以后会自动播放但是没有声音怎么 ...
vue中使用video标签播放FLV总结
Audio/Video 标签属性及自定义(进度条.播放.快进.全屏) - SeaJson - 博客园 (cnblogs.com) //全屏按钮video::-webkit-media-controls ...
HTML5 audio与video标签实现视频播放，音频播放
随着互联网的飞速发展以及HTML5的应用,越来越多的项目中用到video,audio当常用标签. audio 标签属性 <audio src="song.mp3" contr ...
vue中使用video标签插入视频并自动播放
一.效果: 使用video标签的好处是,视频周围没有黑边,观看效果好看二.html: <div v-for="(item,i) in vedioList" :key=&q ...
纯JS Video标签的视频播放、暂停、结束、长度事件 Event 信息
在HTML5后,网站的视频会使用视频标签(video标签)进行播放.以下是该标签的一些事件信息 html <video id="videoDom" controls=&quo ...
Vue 使用 video 标签实现视频播放
写在前面我们在做项目时常常会碰到要做在页面播放视频的功能,该功能我们可以用video.js来做关于video.js video.js是一个拥有h5背景的网络视频播放器,同时支持h5以及Flash视 ...
vue实现分屏_WebRTC如何在Vue.js 配合video标签实现多分屏功能？
TSINGSEE青犀视频研发的视频平台都支持分屏播放,当我们需要通过新的框架来搭建一套新的产品的时候,就要考虑到如何通过新的方式来构建这样一套多屏分割的界面. 我们上次在<我之前做过的所有产品都 ...
在vue中使用video.js实现视频播放
学习笔记这里是官方关于在vue中如何使用的文档,下面的只是基于官方文档的基础用法,详细内容建议查看官方文档! 官方文档以此为例先看效果: 大致步骤如下: 一.安装video.js npm ins ...
vue实现分屏_TSINGSEE青犀视频开发WebRTC如何在Vue.js 配合video标签实现多分屏功能？...
TSINGSEE青犀视频研发的视频平台都支持分屏播放,当我们需要通过新的框架来搭建一套新的产品的时候,就要考虑到如何通过新的方式来构建这样一套多屏分割的界面. 我们上次在<我之前做过的所有产品都 ...

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

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

Vue如何使用video标签实现视频播放相关推荐

最新文章

热门文章