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

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

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

前言

當(dāng)我們做一個后臺系統(tǒng)的音頻管理模塊時，通常需要將我們上傳的視頻做一個前端的提前處理。首先是我們對于文件的大小要限制，文件類型做限制，然后還會有些特定的要求，比如自動去讀取文件的一些信息，傳遞給后端。當(dāng)然這些可以在后端進(jìn)行完成，但是相對而言，將資源的消耗放在前端這一塊是會相對減輕后端壓力的。這里主要介紹要如何獲取前端的第一幀畫面和視頻的時長，畫面可以輔助我們設(shè)置新建信息的視頻封面圖，時長能讓用戶更直觀地感覺到文件的準(zhǔn)確性和大小。

獲取視頻時長

獲取時長比第一幀畫面的獲取相對容易一些，但是兩者有一個共同的需要，那就是需要在我們的html代碼中添加video標(biāo)簽，并且將我們想要獲取信息的視頻地址放到標(biāo)簽的鏈接中。

獲取時長的話，只需要給視頻element添加一個監(jiān)聽事件，loadedmetadata。在這個監(jiān)聽事件中我們可以獲取到audioElement對象，在該對象中便有視頻時長的參數(shù)。

getVideoDuration(file) {
  var url = URL.createObjectURL(file);
  var audioElement = new Audio(url);
  var self = this;
  var result;
  audioElement.addEventListener("loadedmetadata", function() {
    // 視頻時長值的獲取要等到這個匿名函數(shù)執(zhí)行完畢才產(chǎn)生
    result = audioElement.duration; //得到時長為秒，小數(shù)，182.36
    self.ruleForm.videoDuration = parseInt(result); //轉(zhuǎn)為int值
  });
}

獲取第一幀畫面

首先我們需要明白，視頻在我們的頁面是如何去運作的。前端目前我所知道的想要跟視頻產(chǎn)生聯(lián)系的方式就是video標(biāo)簽，所以我們需要有一個video標(biāo)簽，然后將視頻地址添加進(jìn)去，才有辦法獲得該視頻的一些信息。

①第一步需要將用戶上傳的文件轉(zhuǎn)化為blob地址，當(dāng)然有一些情況我們是可以直接獲取到后端傳遞過來的地址的，但是當(dāng)我們需要將視頻和表單一起提交時，就沒辦法做到這樣有一個先后的順序。所以我們要自食其力，把視頻轉(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賦值的對不對
}

②第二步，眾所周知，如果視頻加載成功了，那我們的video正確加載了，是會顯示視頻的第一幀畫面的，所以這個時候我們就可以用canvas去截圖，將第一幀的畫面截下來，再轉(zhuǎn)成base64，當(dāng)然最后如果需要把封面一同上傳，我們可以將base64轉(zhuǎn)file。

findvideocover() {
        let size = 160
        // 獲取video節(jié)點
        const video = document.getElementById("videoPlay");
        video.width = size
        video.height = size
        video.currentTime = 1 // 第一幀
        //創(chuàng)建canvas對象
        const canvas = document.createElement("canvas")
        canvas.width = size
        canvas.height = size
        this.$nextTick(()=>{
          // 利用canvas對象方法繪圖
          canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
          // 轉(zhuǎn)換成base64形式
          const img = canvas.toDataURL("image/jpeg") // 這個就是圖片的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 })