在vue項(xiàng)目中如何獲取視頻的時(shí)長(zhǎng)
vue獲取視頻時(shí)長(zhǎng)
傳入?yún)?shù)為視頻文件對(duì)象
js的代碼如下:
getVideoDuration(file) { ? var url = URL.createObjectURL(file); ? var audioElement = new Audio(url); ? var self = this; ? var result; ? audioElement.addEventListener("loadedmetadata", function() { ? ? // 視頻時(shí)長(zhǎng)值的獲取要等到這個(gè)匿名函數(shù)執(zhí)行完畢才產(chǎn)生 ? ? result = audioElement.duration; //得到時(shí)長(zhǎng)為秒,小數(shù),182.36 ? ? self.ruleForm.videoDuration = parseInt(result); //轉(zhuǎn)為int值 ? }); }
vue-video-player獲取播放時(shí)間
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獲取播放時(shí)間
? 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 ? ? ? ? } ? ? ? },
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)權(quán)限控制路由(vue-router 動(dòng)態(tài)添加路由)
今天小編就為大家分享一篇vue實(shí)現(xiàn)權(quán)限控制路由(vue-router 動(dòng)態(tài)添加路由),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11Vue自定義v-has指令,做按鈕權(quán)限判斷的步驟
這篇文章主要介紹了Vue自定義v-has指令,做按鈕權(quán)限判斷的步驟,幫助大家更好的理解和學(xué)習(xí)使用vue框架,感興趣的朋友可以了解下2021-04-04解決Vue運(yùn)行項(xiàng)目報(bào)錯(cuò)proxy?error:?could?not?proxy?request
這篇文章主要給大家介紹了關(guān)于如何解決Vue運(yùn)行項(xiàng)目報(bào)錯(cuò)proxy?error:could?not?proxy?request的相關(guān)資料,Proxy Error指的是代理服務(wù)器無(wú)法正確處理請(qǐng)求的錯(cuò)誤,需要的朋友可以參考下2023-08-08基于Vue實(shí)現(xiàn)簡(jiǎn)單的貪食蛇游戲
貪食蛇是一個(gè)非常經(jīng)典的游戲,?在游戲中,?玩家操控一條細(xì)長(zhǎng)的直線(xiàn),?它會(huì)不停前進(jìn),?玩家只能操控蛇的頭部朝向,?一路拾起觸碰到之物。本文將用Vue實(shí)現(xiàn)這一游戲,感興趣的可以嘗試一下2022-04-04vue+relation-graph繪制關(guān)系圖實(shí)用組件操作方法
這篇文章主要介紹了vue+relation-graph繪制關(guān)系圖實(shí)用組件操作方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07Vue網(wǎng)絡(luò)請(qǐng)求的三種實(shí)現(xiàn)方式介紹
這篇文章主要介紹了Vue網(wǎng)絡(luò)請(qǐng)求的三種實(shí)現(xiàn)方式,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09詳解如何搭建mpvue框架搭配vant組件庫(kù)的小程序項(xiàng)目
這篇文章主要介紹了詳解如何搭建mpvue框架搭配vant組件庫(kù)的小程序項(xiàng)目,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05