如何使用js獲取video任意時間的畫面截圖

這篇文章將為大家詳細講解有關如何使用js獲取video任意時間的畫面截圖，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

JS是什么

JS是JavaScript的簡稱，它是一種直譯式的腳本語言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，主要用于web的開發，可以給網站添加各種各樣的動態效果，讓網頁更加美觀。

首先就是要把視頻加載出來，然后使用canvas.getContext(‘2d').drawImage(videoElement, 0, 0, canvas.width, canvas.height);獲取到當前視頻時間的截圖，需要不同時間的video視頻圖，設置video的currentTime（單位秒），然后videoElement這個對象信息會實時更新。

如果是視頻是在阿里云OSS上就更方便了，poster=“http://a-image-demo.oss-cn-qingdao.aliyuncs.com/demo.mp4?x-oss-process=video/snapshot,t_6000,m_fast”

<div contenteditable="true" id="in-box" ></div>
<div >  
 <input type="file" name="" id="upload-ipt">
 <div class="review" id="out-box"></div>
</div>

function getVideoImage() {
 var obj_file = document.getElementById("upload-ipt");
 var file = obj_file.files[0];
 var blob = new Blob([file]), // 文件轉化成二進制文件
  url = URL.createObjectURL(blob); //轉化成url
 if (file && /video/g.test(file.type)) {
  var $video = $('<div><video controls src="' + url + '"></video></div><div>&nbsp;</div>');
  //后面加一個空格div是為了解決在富文本中按Backspace時刪除無反應的問題
  $('#in-box').html($video);
  var videoElement = $("video")[0];
  videoElement.addEventListener("canplay", function (_event) {
   var canvas = document.createElement("canvas");     
   canvas.width = videoElement.videoWidth;
   canvas.height = videoElement.videoHeight;
   console.log(videoElement.videoWidth)
   canvas.getContext('2d').drawImage(videoElement, 0, 0, canvas.width, canvas.height);
   var img = document.createElement("img");
   img.src = canvas.toDataURL("image/png");
   $("#out-box").html(img);
   URL.revokeObjectURL(this.src); // 釋放createObjectURL創建的對象
   console.log("loadedmetadata")
  });
 }else{
  alert("請上傳一個視頻文件！");
  obj_file.value = ""
 }
};

關于“如何使用js獲取video任意時間的畫面截圖”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。