js獲取video任意時(shí)間的畫面截圖

更新時(shí)間：2019-04-16 09:12:00點(diǎn)擊次數(shù)：1757次

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

如果是視頻是在阿里云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]), // 文件轉(zhuǎn)化成二進(jìn)制文件

url = URL.createObjectURL(blob); //轉(zhuǎn)化成url

if (file && /video/g.test(file.type)) {

var $video = $('

//后面加一個(gè)空格div是為了解決在富文本中按Backspace時(shí)刪除無反應(yīng)的問題

$('#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創(chuàng)建的對(duì)象

console.log("loadedmetadata")

});

}else{

alert("請上傳一個(gè)視頻文件！");

obj_file.value = ""

}

};

本站文章版權(quán)歸原作者及原出處所有 。內(nèi)容為作者個(gè)人觀點(diǎn)， 并不代表本站贊同其觀點(diǎn)和對(duì)其真實(shí)性負(fù)責(zé)，本站只提供參考并不構(gòu)成任何投資及應(yīng)用建議。本站是一個(gè)個(gè)人學(xué)習(xí)交流的平臺(tái)，網(wǎng)站上部分文章為轉(zhuǎn)載，并不用于任何商業(yè)目的，我們已經(jīng)盡可能的對(duì)作者和來源進(jìn)行了通告，但是能力有限或疏忽，造成漏登，請及時(shí)聯(lián)系我們，我們將根據(jù)著作權(quán)人的要求，立即更正或者刪除有關(guān)內(nèi)容。本站擁有對(duì)此聲明的最終解釋權(quán)。

總結(jié)

以上是生活随笔為你收集整理的js截屏 video_js获取video任意时间的画面截图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。