快捷導(dǎo)航

在vue項(xiàng)目中如何獲取視頻的時(shí)長(zhǎng)

更新時(shí)間：2022年04月11日 10:17:57 作者：看門(mén)貓

這篇文章主要介紹了在vue項(xiàng)目中如何獲取視頻的時(shí)長(zhǎng)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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)文章

Element-plus使用中遇到的問(wèn)題小結(jié)
表格數(shù)據(jù)是websocket通信獲取的數(shù)據(jù),首次獲取20條數(shù)據(jù),以后新增訂閱獲取一條,新增一條則向上滑動(dòng)顯示最新數(shù)據(jù),本文給大家介紹Element-plus使用中遇到的問(wèn)題小結(jié),感興趣的朋友跟隨小編一起看看吧
2024-04-04
vuex中store存儲(chǔ)store.commit和store.dispatch的區(qū)別及說(shuō)明
這篇文章主要介紹了vuex中store存儲(chǔ)store.commit和store.dispatch的區(qū)別及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue+golang實(shí)現(xiàn)上傳微信頭像功能
這篇文章主要介紹了vue+golang實(shí)現(xiàn)上傳微信頭像功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2023-10-10
Vue中從template到j(luò)sx語(yǔ)法教程示例
這篇文章主要為大家介紹了Vue中從template到j(luò)sx語(yǔ)法教程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-10-10
解決vue中el-date-picker?type=daterange日期不回顯的問(wèn)題
這篇文章主要介紹了解決vue中el-date-picker?type=daterange日期不回顯的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue項(xiàng)目刷新當(dāng)前頁(yè)面的三種方法
這篇文章主要介紹了vue項(xiàng)目刷新當(dāng)前頁(yè)面的三種方法，本文圖文并茂給大家介紹的非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-12-12
vue下載excel的實(shí)現(xiàn)代碼后臺(tái)用post方法
這篇文章主要介紹了vue下載excel的實(shí)現(xiàn)代碼,后臺(tái)用post方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2019-05-05
VUE腳手架具體使用方法
這篇文章主要介紹了VUE腳手架具體使用方法，vue-cli這個(gè)構(gòu)建工具大大降低了webpack的使用難度，小編覺(jué)得不錯(cuò)，下面就一起來(lái)了解一下具體使用方法
2019-05-05
Vue中keep-alive組件作用詳解
這篇文章主要為大家詳細(xì)介紹了Vue中keep-alive組件的作用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-02-02
vue實(shí)現(xiàn)flv格式視頻播放效果
這篇文章主要介紹了vue實(shí)現(xiàn)flv格式視頻播放,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-07-07