在vue項目中如何獲取視頻的時長
更新時間:2022年04月11日 10:17:57 作者:看門貓
這篇文章主要介紹了在vue項目中如何獲取視頻的時長,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
vue獲取視頻時長
傳入?yún)?shù)為視頻文件對象
js的代碼如下:
getVideoDuration(file) { ? var url = URL.createObjectURL(file); ? var audioElement = new Audio(url); ? var self = this; ? var result; ? audioElement.addEventListener("loadedmetadata", function() { ? ? // 視頻時長值的獲取要等到這個匿名函數(shù)執(zhí)行完畢才產(chǎn)生 ? ? result = audioElement.duration; //得到時長為秒,小數(shù),182.36 ? ? self.ruleForm.videoDuration = parseInt(result); //轉(zhuǎn)為int值 ? }); }
vue-video-player獲取播放時間
npm install vue-video-player -S
全局引用
import VideoPlayer from 'vue-video-player' import 'vue-video-player/src/custom-theme.css' import 'video.js/dist/video-js.css' Vue.use(VideoPlayer)
局部引用
? import { ? ? videoPlayer ? } from 'vue-video-player' ? import 'video.js/dist/video-js.css' ? export default { ? components: { ? ? videoPlayer ? } }
html
? ?<video-player class="video-player vjs-custom-skin"? ? ? ? ? ? ? ref="videoPlayer"? ? ? ? ? ? ? :playsinline="true"? ? ? ? ? ? ? :options="playerOptions"> ? ? ? </video-player>
methods獲取播放時間
? this.$nextTick(() => { ? ? ? ?setTimeout(() => { ? ? ? ?let du = document.getElementById("vjs_video_3_html5_api") //獲取組件下的video ? ? ? ?var hour = parseInt((du.duration) / 3600); ? ? ? ?var minute = parseInt((du.duration % 3600) / 60); ? ? ? ?var second = parseInt(du.duration % 60); ? ? ? ?let result = '' ? ? ? ?if (hour > 0) { ? ? ? ?result = this.formatTimeStr(hour) + ':' + this.formatTimeStr(minute) + ':' + this ? ? ? ?.formatTimeStr(second) ? ? ? ? ? ? ? ? ?} else { ? ? ? ? ? ? ? ? ? ? result = this.formatTimeStr(minute) + ':' +? ? ? ? ? ? ? ? ? ? this.formatTimeStr(second) ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? return result //轉(zhuǎn)化成分,秒 ? ? ? ? ? ? ? ? }, 200) ? ? ? ? ? ? ? }) ? ? ? ?formatTimeStr(val) { ? ? ? ? if (val > 9) { ? ? ? ? ? return val ? ? ? ? } else { ? ? ? ? ? return '0' + val ? ? ? ? } ? ? ? },
以上為個人經(jīng)驗(yàn),希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)權(quán)限控制路由(vue-router 動態(tài)添加路由)
今天小編就為大家分享一篇vue實(shí)現(xiàn)權(quán)限控制路由(vue-router 動態(tài)添加路由),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11Vue自定義v-has指令,做按鈕權(quán)限判斷的步驟
這篇文章主要介紹了Vue自定義v-has指令,做按鈕權(quán)限判斷的步驟,幫助大家更好的理解和學(xué)習(xí)使用vue框架,感興趣的朋友可以了解下2021-04-04解決Vue運(yùn)行項目報錯proxy?error:?could?not?proxy?request
這篇文章主要給大家介紹了關(guān)于如何解決Vue運(yùn)行項目報錯proxy?error:could?not?proxy?request的相關(guān)資料,Proxy Error指的是代理服務(wù)器無法正確處理請求的錯誤,需要的朋友可以參考下2023-08-08vue+relation-graph繪制關(guān)系圖實(shí)用組件操作方法
這篇文章主要介紹了vue+relation-graph繪制關(guān)系圖實(shí)用組件操作方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07Vue網(wǎng)絡(luò)請求的三種實(shí)現(xiàn)方式介紹
這篇文章主要介紹了Vue網(wǎng)絡(luò)請求的三種實(shí)現(xiàn)方式,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09