JS可以截取video的標籤影片縮圖嗎？
- php中世界最好的语言原創
- 2018-03-08 11:11:485609瀏覽
這次帶給大家JS可以截取video的標籤影片縮圖嗎？ ，JS截取video的標籤影片縮圖的注意事項有哪些，下面就是實戰案例，一起來看一下。
JavaScript截取video標籤影片縮圖,前幾天做個小專案以瀑布流載入MP4影片,一個頁面差不多會載入100個MP4影片原始做法就是直接顯示所有video標籤影片,但是會發現,當其中有一個影片太大卡住了,接下去的所有影片都沒辦法顯示影片縮圖。想顯示影片縮圖,但又不想直接顯示影片出來。透過搜尋和結合項目實現了以下小代碼。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js">
</script>
<style>
</style>
<script type="text/javascript">//--获取视频缩略图--
function vload(obj) {
$(obj).removeAttr("poster");
var vimg = $("<img/>")[0];
captureImage(obj, vimg);
$(obj).after(vimg);
$(obj).remove();
};
var scale = 0.8; //缩放
function captureImage(video, output) { //截图
try {
var videocanvas = $("<canvas/>")[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";
}
};
//--获取视频缩略图--
</script>
</head>
<body>
<video src="视频地址" preload="metadata" onloadeddata='vload(this)' poster="加载动画.gif">
</video>
</body>
</html>我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
以上是JS可以截取video的標籤影片縮圖嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn