2019-4-15 seo達(dá)人
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
首先就是要把視頻加載出來(lái)，然后使用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”
如果是要獲取上傳本地視頻預(yù)覽圖，可采用下面的方法，但有兼容性問(wèn)題，目前測(cè)試移動(dòng)端安卓機(jī)只有Chrome瀏覽器支持，微信和QQ瀏覽器都無(wú)法響應(yīng)本地視頻的canplay事件。
<div contenteditable="true" id="in-box" style="width:1000px;margin: 20px auto;"></div>
<div style="width:1000px;margin: 20px auto;">
<input type="file" name="" accept="video/*" 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]), // 文件轉(zhuǎn)化成二進(jìn)制文件
url = URL.createObjectURL(blob); //轉(zhuǎn)化成url
if (file && /video/g.test(file.type)) {
var $video = $('<div><video controls src="' + url + '"></video></div><div> </div>');
//后面加一個(gè)空格div是為了解決在富文本中按Backspace時(shí)刪除無(wú)反應(yīng)的問(wèn)題
$('#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("請(qǐng)上傳一個(gè)視頻文件！");
obj_file.value = ""
}
};
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com