JS可以截取video的標籤影片縮圖嗎？-js教程-PHP中文網

JS可以截取video的標籤影片縮圖嗎？

php中世界最好的语言

發布： 2018-03-08 11:11:48

原創

5655 人瀏覽過

這次帶給大家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(&#39;2d&#39;).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=&#39;vload(this)&#39; poster="加载动画.gif">
        </video>
    </body>
 
</html>

登入後複製

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