目錄

• 前言
• 獲取視頻時長
• 獲取第一幀畫面
• 結語

前言

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

獲取視頻時長

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

獲取時長的話，只需要給視頻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); //轉為int值
  });
}

獲取第一幀畫面

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

①第一步需要將用戶上傳的文件轉化為blob地址，當然有一些情況我們是可以直接獲取到后端傳遞過來的地址的，但是當我們需要將視頻和表單一起提交時，就沒辦法做到這樣有一個先后的順序。所以我們要自食其力，把視頻轉為地址，加載到音頻標簽中。

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去截圖，將第一幀的畫面截下來，再轉成base64，當然最后如果需要把封面一同上傳，我們可以將base64轉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);
  // 轉換成base64形式
  const img = canvas.toDataURL("image/jpeg") // 這個就是圖片的base64
  this.coverUrl = img
})
      }

base64轉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 })

結語

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

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