Vue使用video標(biāo)簽實現(xiàn)視頻播放
本文項目為大家分享了Vue使用video標(biāo)簽實現(xiàn)視頻播放的具體代碼,供大家參考,具體內(nèi)容如下
項目需求:動態(tài)顯示視頻滾動條、禁止視頻下載、播放時每5s更新當(dāng)前時長、每10分鐘暫停視頻顯示提示。
之前做視頻播放時基本都是使用 vue-video-player 組件,其原因為 封裝功能齊全、播放源兼容性好等。
通過這次項目需求,也深入的學(xué)習(xí)了 video 標(biāo)簽的屬性及方法。具體在這里跟大家分享一下。
具體使用方法如下
<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, // 視頻播放狀態(tài) // 學(xué)時 studyTime: { currentTime: 0, // 當(dāng)前已學(xué)時長 duration: 0 // 總時長 }, timer: {}, // 定時器 pauseTimer: {} // 暫停定時器 }; }, /** * @param poster 展示圖 * @param src 視頻資源 * @param controls 是否顯示控件 * @param control 控件控制 * @param videoData 視頻基礎(chǔ)數(shù)據(jù) */ 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() { // 監(jiān)聽視頻播放 this.$refs.myVideo.addEventListener("play", () => { console.log("video is playing"); this.openTimer(); }); // 監(jiān)聽視頻暫停 this.$refs.myVideo.addEventListener("pause", () => { console.log("video is stop"); this.closeTimer(); }); }, methods: { // 開啟定時器 openTimer() { this.timer = setInterval(() => { this.$emit("videoStudyTime", this.studyTime); }, 5000); }, // 關(guān)閉定時器 closeTimer() { clearInterval(this.timer); this.$emit("videoStudyTime", this.studyTime); }, // 開啟暫停定時器 openPauseTimer() { this.pauseTimer = setInterval(() => { this.hintOperate(); }, 600000); }, // 關(guān)閉暫停定時器 closePauseTimer() { clearInterval(this.pauseTimer); }, // 提示操作 hintOperate() { this.operateVideo(); this.$alert("請點擊確認(rèn)繼續(xù)學(xué)習(xí)", "提示", { confirmButtonText: "確定", confirmButtonClass: "hint-btn", showClose: false, callback: action => { this.$refs.myVideo.currentTime = this.videoData.currentTime; this.operateVideo(); this.openPauseTimer(); } }); }, // 獲取當(dāng)前播放位置 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: { // 監(jiān)聽操作 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 { //進(jìn)度條 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 樣式動態(tài)展示視頻滾動條
2.使用 video 標(biāo)簽的 οncοntextmenu=“return false” 屬性來實現(xiàn)禁止下載
3.使用 video 標(biāo)簽的 @timeupdate=“timeupdate” 方法來時間視頻播放進(jìn)度監(jiān)聽
4.使用 vue 的 ref 屬性為 video 標(biāo)簽綁定監(jiān)聽事件,來實現(xiàn)其他功能,如時長統(tǒng)計、延遲提示、動態(tài)顯示圖標(biāo)播放按鈕等功能。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js使用$.ajax和vue-resource實現(xiàn)OAuth的注冊、登錄、注銷和API調(diào)用
這篇文章主要介紹了 Vue.js使用$.ajax和vue-resource實現(xiàn)OAuth的注冊、登錄、注銷和API調(diào)用,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05以v-model與promise兩種方式實現(xiàn)vue彈窗組件
這篇文章主要介紹了vue彈窗組件之兩種方式v-model與promise,每種方式給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2018-05-05lottie實現(xiàn)vue自定義loading指令及常用指令封裝詳解
這篇文章主要為大家介紹了lottie實現(xiàn)vue自定義loading指令及常用指令封裝,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09Vue?elementui如何實現(xiàn)表格selection的默認(rèn)勾選
這篇文章主要介紹了Vue?elementui如何實現(xiàn)表格selection的默認(rèn)勾選問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06基于Ant-design-vue的Modal彈窗 封裝 命令式與Hooks用法
這篇文章主要給大家介紹了基于Ant-design-vue的Modal彈窗封裝命令式與Hooks用法,文中有詳細(xì)的代碼示例,具有一定的參考價值,感興趣的同學(xué)可以借鑒閱讀2023-06-06