目錄

• 前言
• 獲取視頻時(shí)長(zhǎng)
• 獲取第一幀畫面
• 結(jié)語(yǔ)

前言

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

獲取視頻時(shí)長(zhǎng)

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

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

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值
  });
}

獲取第一幀畫面

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

①第一步需要將用戶上傳的文件轉(zhuǎn)化為blob地址，當(dāng)然有一些情況我們是可以直接獲取到后端傳遞過(guò)來(lái)的地址的，但是當(dāng)我們需要將視頻和表單一起提交時(shí)，就沒(méi)辦法做到這樣有一個(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去截圖，將第一幀的畫面截下來(lái)，再轉(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é)語(yǔ)

這兩個(gè)功能并不復(fù)雜，只要理解其中的原理和流程就可以很簡(jiǎn)單的達(dá)到效果。主要是將視頻從file轉(zhuǎn)為blob是否能夠正常加載到video中，如若不能，則需要請(qǐng)求后端的幫助，先將視頻傳遞上去后獲取到文件的地址，再去執(zhí)行這一讀取第一幀畫面作為封面的功能。

到此這篇關(guān)于JavaScript實(shí)現(xiàn)讀取上傳視頻文件的時(shí)長(zhǎng)和第一幀畫面過(guò)程講解的文章就介紹到這了,更多相關(guān)JS讀取視頻文件時(shí)長(zhǎng)內(nèi)容請(qǐng)搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持！