在vue項(xiàng)目中如何獲取視頻的時(shí)長
vue獲取視頻時(shí)長
傳入?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í)長值的獲取要等到這個(gè)匿名函數(shù)執(zhí)行完畢才產(chǎn)生
? ? result = audioElement.duration; //得到時(shí)長為秒,小數(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 動態(tài)添加路由)
今天小編就為大家分享一篇vue實(shí)現(xiàn)權(quán)限控制路由(vue-router 動態(tài)添加路由),具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue自定義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ù)器無法正確處理請求的錯(cuò)誤,需要的朋友可以參考下2023-08-08
vue+relation-graph繪制關(guān)系圖實(shí)用組件操作方法
這篇文章主要介紹了vue+relation-graph繪制關(guān)系圖實(shí)用組件操作方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07
Vue網(wǎng)絡(luò)請求的三種實(shí)現(xiàn)方式介紹
這篇文章主要介紹了Vue網(wǎng)絡(luò)請求的三種實(shí)現(xiàn)方式,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
詳解如何搭建mpvue框架搭配vant組件庫的小程序項(xiàng)目
這篇文章主要介紹了詳解如何搭建mpvue框架搭配vant組件庫的小程序項(xiàng)目,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05

