HTML5 を使用してビデオから静止画をキャプチャするサンプルコード

ビデオから静止画をキャプチャする方法を示す簡単な例。見てみましょう

次の HTML コードがあるとします:

<video id="video" controls="controls">
    <source src=".mp4" />
</video>
 
<button id="capture">Capture</button>
 
<p id="output"></p>

次に、ユーザーが [キャプチャ] ボタンをクリックすると、現在のビデオ コンテンツをキャンバスに書き込み、それを使用してキャンバス上に画像を表示します。

(function() {
    "using strict";
 
    var $video, $output;
    var scale = 0.25;
 
    var initialize = function() {
        $output = $("#output");
        $video = $("#video").get(0);
        $("#capture").click(captureImage);               
    };
 
    var captureImage = function() {
        var canvas = document.createElement("canvas");
        canvas.width = $video.videoWidth * scale;
        canvas.height = $video.videoHeight * scale;
        canvas.getContext('2d')
              .drawImage($video, 0, 0, canvas.width, canvas.height);
 
        var img = document.createElement("img");
        img.src = canvas.toDataURL();
        $output.prepend(img);
    };
    $(initialize);           
}());

【関連おすすめ】

1. 無料のh5オンラインビデオチュートリアル

2. HTML5完全版マニュアル

3. php.cnオリジナルのhtml5ビデオチュートリアル

以上がHTML5 を使用してビデオから静止画をキャプチャするサンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。