suchen

Heim >Web-Frontend >js-Tutorial >Kann JS das getaggte Video-Thumbnail eines Videos erfassen?

Kann JS das getaggte Video-Thumbnail eines Videos erfassen?

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

Dieses Mal bringe ich Ihnen das Tag VideoThumbnail, das mit JS erfasst werden kann? , was sind die Vorsichtsmaßnahmen für die Aufnahme von Video-Thumbnails mit JS? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

JavaScript Ich habe vor ein paar Tagen ein kleines Projekt durchgeführt, um MP4-Videos mit Wasserfallfluss zu laden Die Methode besteht darin, alle Videos direkt anzuzeigen. Sie werden jedoch feststellen, dass, wenn eines der Videos zu groß ist und hängen bleibt, nicht für alle nachfolgenden Videos Video-Miniaturansichten angezeigt werden können. Ich möchte Video-Miniaturansichten anzeigen, aber ich möchte das Video nicht direkt anzeigen. Der folgende kleine Code wurde durch Suchen und Kombinieren von Elementen implementiert. 

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Verwandte Lektüre:

Detaillierte Erklärung des Promise-Objekts von Angularjs

Detaillierte Erklärung des ng-bind-html Direktive von AngularJS

Das obige ist der detaillierte Inhalt vonKann JS das getaggte Video-Thumbnail eines Videos erfassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erklärung des Versprechensobjekts in AngularjsNächster Artikel：Detaillierte Erklärung des Versprechensobjekts in Angularjs

In Verbindung stehende Artikel

Mehr sehen