ホームページ > ウェブフロントエンド > jsチュートリアル > JS はビデオのタグ付きビデオサムネイルをキャプチャできますか?

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

php中世界最好的语言
リリース: 2018-03-08 11:11:48
オリジナル
5668 人が閲覧しました

今回はJSを使ってキャプチャできるタグvideothumbnailをご紹介します。 、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 サイトの他の関連記事に注目してください。

関連書籍:

AngularjsのPromiseオブジェクトの詳細説明

angularJSのng-bind-htmlディレクティブの詳細説明

以上がJS はビデオのタグ付きビデオサムネイルをキャプチャできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート