這次給大家帶來JS可以截取video的標簽視頻縮略圖嗎？，JS截取video的標簽視頻縮略圖的注意事項有哪些，下面就是實戰案例，一起來看一下。

JavaScript截取video標簽視頻縮略圖,前幾天做個小項目以瀑布流加載MP4視頻,一個頁面差不多會加載100個MP4視頻原始做法就是直接顯示所有video標簽視頻,但是會發現,當其中有一個視頻太大卡住了,接下去的所有視頻都沒辦法顯示視頻縮略圖。想顯示視頻縮略圖,但又不想直接顯示視頻出來。通過搜索和結合項目實現了以下小代碼。

function vload(obj) {

$(obj).removeAttr("poster");

var vimg = $("")[0];

captureImage(obj, vimg);

$(obj).after(vimg);

$(obj).remove();

};

var scale = 0.8; //縮放

function captureImage(video, output) { //截圖

try {

var videocanvas = $("")[0];

videocanvas.width = video.videoWidth * scale;

videocanvas.height = video.videoHeight * scale;

videocanvas.getContext('2d').drawImage(video, 0, 0, videocanvas.width, videocanvas.height);

output.src = videocanvas.toDataURL("image/png");

delete videocanvas;

} catch(e) {

output.src = "加載動畫.gif";

}

};

//--獲取視頻縮略圖--

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

總結

以上是生活随笔為你收集整理的html视频标签略缩图,JS可以截取video的标签视频缩略图吗？的全部內容，希望文章能夠幫你解決所遇到的問題。

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