Maison >interface Web >js tutoriel >JS peut-il capturer la vignette vidéo balisée d'une vidéo ?

JS peut-il capturer la vignette vidéo balisée d'une vidéo ?

php中世界最好的语言original: 2018-03-08 11:11:485671parcourir

Cette fois, je vous apporte le tag Vidéo Vignette qui peut être capturée à l'aide de JS ? , quelles sont les précautions pour capturer des vignettes vidéo avec JS Ce qui suit est un cas pratique, jetons un oeil.

JavaScript Interceptez la vignette vidéo de la balise vidéo. J'ai réalisé un petit projet il y a quelques jours pour charger des vidéos MP4 avec un flux en cascade. Une page chargera près de 100 vidéos MP4 d'origine. La méthode consiste à afficher directement toutes les vidéos, mais vous constaterez que lorsqu'une des vidéos est trop grande et bloquée, les vignettes vidéo ne peuvent pas être affichées pour toutes les vidéos suivantes. Je souhaite afficher des vignettes vidéo, mais je ne souhaite pas afficher la vidéo directement. Le petit code suivant a été implémenté en recherchant et en combinant des éléments.

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Explication détaillée de l'objet de promesse d'Angularjs

Explication détaillée de ng-bind-html directive de angulaireJS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de l'objet de promesse dans AngularjsArticle suivant：Explication détaillée de l'objet de promesse dans Angularjs

Articles Liés

Voir plus