JS はビデオのタグ付きビデオサムネイルをキャプチャできますか?-jsチュートリアル-php.cn

JS はビデオのタグ付きビデオサムネイルをキャプチャできますか?

php中世界最好的语言

リリース： 2018-03-08 11:11:48

オリジナル

5655 人が閲覧しました

今回はJSを使ってキャプチャできるタグvideo thumbnailをご紹介します。、JS を使用してビデオのサムネイルを傍受するための注意事項は何ですか? 以下は実際的なケースです。見てみましょう。

JavaScriptvideo タグのビデオのサムネイルをインターセプトします。数日前、ウォーターフォールフローで MP4 ビデオをロードする小さなプロジェクトを実行しました。元の方法は、すべてのビデオを直接表示することです。動画にタグを付けましたが、動画の 1 つが大きすぎてスタックし、後続のすべての動画で動画のサムネイルが表示されないことがわかります。動画のサムネイルを表示したいが、動画を直接表示したくない。次の小さなコードは、項目を検索して結合することによって実装されました。

<!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 中国語 Web サイトの他の関連記事に注目してください。