js獲取video任意時間的畫面截圖

更新時間：2019-04-16 09:12:00點擊次數：1757次

首先就是要把視頻加載出來，然后使用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”

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是為了解決在富文本中按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_js获取video任意时间的画面截图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。