快捷導(dǎo)航

JavaScript實(shí)現(xiàn)讀取上傳視頻文件的時(shí)長和第一幀畫面過程講解

更新時(shí)間：2023年05月12日 09:05:27 作者：世界和平

當(dāng)我們做一個(gè)后臺(tái)系統(tǒng)的音視頻管理模塊時(shí)，通常要限制文件的大小和類型，這篇文章主要介紹了JavaScript實(shí)現(xiàn)讀取上傳視頻文件的時(shí)長和第一幀畫面過程，需要詳細(xì)了解實(shí)現(xiàn)方法可以參考下文

前言

當(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ù)雜，只要理解其中的原理和流程就可以很簡單的達(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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: