Home > Article > Web Front-end > Can JS capture the tagged video thumbnail of a video?

Can JS capture the tagged video thumbnail of a video?

php中世界最好的语言Original: 2018-03-08 11:11:485656browse

This time I will bring you the tag of video that can be intercepted by JSVideo Thumbnail? , what are the precautions for tagging video thumbnails when intercepting videos with JS? The following is a practical case, let’s take a look.

JavaScript Intercept the video tag video thumbnail. I did a small project a few days ago to load MP4 videos with waterfall flow. A page will load almost 100 MP4 videos. The original method is to directly display all videos. Tag videos, but you will find that when one of the videos is too large and stuck, video thumbnails cannot be displayed for all subsequent videos. I want to display video thumbnails, but I don’t want to display the video directly. The following small code was implemented by searching and combining items.

<!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>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Can JS capture the tagged video thumbnail of a video?

Related articles