| 本文项目为大家分享了Vue使用video标签实现视频播放的具体代码，供大家参考，具体内容如下 项目需求：动态显示视频滚动条、禁止视频下载、播放时每5s更新当前时长、每10分钟暂停视频显示提示。
之前做视频播放时基本都是使用 vue-video-player 组件，其原因为 封装功能齐全、播放源兼容性好等。
通过这次项目需求，也深入的学习了 video 标签的属性及方法。具体在这里跟大家分享一下。 具体使用方法如下 <template> <!-- Video组件 --> <div id="common-video" class="h-100"> <div :class="{ isShow: control }" class="h-100"> <video ref="myVideo" :poster="poster" :src="src" :controls="controls" oncontextmenu="return false" @timeupdate="timeupdate" controlslist="nodownload" class="video-box" ></video> <img src="@/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 标签绑定监听事件，来实现其他功能，如时长统计、延迟提示、动态显示图标播放按钮等功能。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持51zixue.net。
下载地址:
Vue调用PC摄像头实现拍照功能
vue实现pc端拍照上传功能 |
