新聞中心
這篇文章將為大家詳細(xì)講解有關(guān)如何使用js獲取video任意時(shí)間的畫面截圖,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
創(chuàng)新互聯(lián)專注于大城企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計(jì),商城網(wǎng)站建設(shè)。大城網(wǎng)站建設(shè)公司,為大城等地區(qū)提供建站服務(wù)。全流程按需定制設(shè)計(jì),專業(yè)設(shè)計(jì),全程項(xiàng)目跟蹤,創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)
JS是什么
JS是JavaScript的簡稱,它是一種直譯式的腳本語言,其解釋器被稱為JavaScript引擎,是瀏覽器的一部分,主要用于web的開發(fā),可以給網(wǎng)站添加各種各樣的動(dòng)態(tài)效果,讓網(wǎng)頁更加美觀。
首先就是要把視頻加載出來,然后使用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 = "" } };
關(guān)于“如何使用js獲取video任意時(shí)間的畫面截圖”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請把它分享出去讓更多的人看到。
網(wǎng)站名稱:如何使用js獲取video任意時(shí)間的畫面截圖
文章源于:http://www.ef60e0e.cn/article/ijhheh.html