JavaScript實(shí)現(xiàn)讀取上傳視頻文件的時(shí)長和第一幀畫面過程講解
目錄
- 前言
- 獲取視頻時(shí)長
- 獲取第一幀畫面
- 結(jié)語
前言
當(dāng)我們做一個(gè)后臺(tái)系統(tǒng)的音頻管理模塊時(shí),通常需要將我們上傳的視頻做一個(gè)前端的提前處理。首先是我們對(duì)于文件的大小要限制,文件類型做限制,然后還會(huì)有些特定的要求,比如自動(dòng)去讀取文件的一些信息,傳遞給后端。當(dāng)然這些可以在后端進(jìn)行完成,但是相對(duì)而言,將資源的消耗放在前端這一塊是會(huì)相對(duì)減輕后端壓力的。這里主要介紹要如何獲取前端的第一幀畫面和視頻的時(shí)長,畫面可以輔助我們?cè)O(shè)置新建信息的視頻封面圖,時(shí)長能讓用戶更直觀地感覺到文件的準(zhǔn)確性和大小。
獲取視頻時(shí)長
獲取時(shí)長比第一幀畫面的獲取相對(duì)容易一些,但是兩者有一個(gè)共同的需要,那就是需要在我們的html代碼中添加video標(biāo)簽,并且將我們想要獲取信息的視頻地址放到標(biāo)簽的鏈接中。
獲取時(shí)長的話,只需要給視頻element添加一個(gè)監(jiān)聽事件,loadedmetadata。在這個(gè)監(jiān)聽事件中我們可以獲取到audioElement對(duì)象,在該對(duì)象中便有視頻時(shí)長的參數(shù)。
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值 }); }
獲取第一幀畫面
首先我們需要明白,視頻在我們的頁面是如何去運(yùn)作的。前端目前我所知道的想要跟視頻產(chǎn)生聯(lián)系的方式就是video標(biāo)簽,所以我們需要有一個(gè)video標(biāo)簽,然后將視頻地址添加進(jìn)去,才有辦法獲得該視頻的一些信息。
①第一步需要將用戶上傳的文件轉(zhuǎn)化為blob地址,當(dāng)然有一些情況我們是可以直接獲取到后端傳遞過來的地址的,但是當(dāng)我們需要將視頻和表單一起提交時(shí),就沒辦法做到這樣有一個(gè)先后的順序。所以我們要自食其力,把視頻轉(zhuǎn)為地址,加載到音頻標(biāo)簽中。
const file = "....." const a = new FileReader(); a.readAsDataURL(file); a.onload = (e) => { const blob = new Blob([e.target.result], { type: file.type }) // 如果發(fā)現(xiàn)亂碼檢查一下type賦值的對(duì)不對(duì) }
②第二步,眾所周知,如果視頻加載成功了,那我們的video正確加載了,是會(huì)顯示視頻的第一幀畫面的,所以這個(gè)時(shí)候我們就可以用canvas去截圖,將第一幀的畫面截下來,再轉(zhuǎn)成base64,當(dāng)然最后如果需要把封面一同上傳,我們可以將base64轉(zhuǎn)file。
findvideocover() { let size = 160 // 獲取video節(jié)點(diǎn) const video = document.getElementById("videoPlay"); video.width = size video.height = size video.currentTime = 1 // 第一幀 //創(chuàng)建canvas對(duì)象 const canvas = document.createElement("canvas") canvas.width = size canvas.height = size this.$nextTick(()=>{ // 利用canvas對(duì)象方法繪圖 canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height); // 轉(zhuǎn)換成base64形式 const img = canvas.toDataURL("image/jpeg") // 這個(gè)就是圖片的base64 this.coverUrl = img }) }
base64轉(zhuǎn)file
const arr = base64.split(",") const type = arr[0].match(/:(.*?);/)[1] const size = window.atob(arr[1]) let n = size.length const u8arr = new Uint8Array(n) while (n--) { u8arr[n] = size.charCodeAt(n) } const file = new File([u8arr], name, { type })
結(jié)語
這兩個(gè)功能并不復(fù)雜,只要理解其中的原理和流程就可以很簡(jiǎn)單的達(dá)到效果。主要是將視頻從file轉(zhuǎn)為blob是否能夠正常加載到video中,如若不能,則需要請(qǐng)求后端的幫助,先將視頻傳遞上去后獲取到文件的地址,再去執(zhí)行這一讀取第一幀畫面作為封面的功能。
到此這篇關(guān)于JavaScript實(shí)現(xiàn)讀取上傳視頻文件的時(shí)長和第一幀畫面過程講解的文章就介紹到這了,更多相關(guān)JS讀取視頻文件時(shí)長內(nèi)容請(qǐng)搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持!
