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中世界最好的语言
php中世界最好的语言Original
2018-03-08 11:11:485653browse

This time I will bring you the tag of video that can be intercepted by JSVideoThumbnail? , 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!

Related reading:

Detailed explanation of the promise object of Angularjs

Detailed explanation of the ng-bind-html directive of angularJS

The above is the detailed content of Can JS capture the tagged video thumbnail of a video?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn