首页 >web前端 >js教程 >JS可以截取video的标签视频缩略图吗？

JS可以截取video的标签视频缩略图吗？

php中世界最好的语言原创: 2018-03-08 11:11:485675浏览

这次给大家带来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中文网其它相关文章！