3

最近、videoタグのスクリーンショットをキャプチャするためのヘルパークラスを作成しました。現在、このクラスには、キャンバスを使用するキャプチャ用の単一のメソッドが含まれています。これはすべて意図したとおりに機能します。ビデオの現在のフレームのスクリーンショットまたはキャプチャを取得します[ currentTime]。

var VideoSnapper = {
    captureAsCanvas: function (video, size)
    {
        // create a canvas, set the width and height, and draw the video
        var canvas = $('<canvas />').attr({ width: size.width, height: size.height })[0];
        canvas.getContext('2d').drawImage(video, 0, 0, size.width, size.height)

        return canvas;
    }
}

これがjsFiddleのコードのデモです

これをさらに拡張して、ビデオ内の特定の時間のスクリーンショットをキャプチャするオプションのtimeパラメーターを渡すことができるようにします。ビデオの時間を更新し、キャプチャしてから時間を元に戻そうとしましたが、成功しませんでした。

任意の提案やアイデアは大歓迎です。

4

3 に答える 3

4

ビデオを任意の位置にシークする場合は、シークされたイベントを待つ必要があります。それ以外の場合、ビデオはロードされません。この例を作成したばかりなので、お役に立てば幸いです。http://jsfiddle.net/vphyr/ビデオ要素の詳細については、このhttp://www.w3.org/wiki/HTML/Elements/videoも確認してください。

于 2012-07-07T00:33:04.707 に答える
2

' timeupdate 'イベントvideo.currentTime = time のシークとスナップに使用 しています。

于 2013-11-13T14:30:15.443 に答える
0

これが私のコードです：

function createPoster($video) {
        //here you can set anytime you want
        $video.currentTime = 5;
        var canvas = document.createElement("canvas");
        canvas.width = 350;
        canvas.height = 200;
        canvas.getContext("2d").drawImage($video, 0, 0, canvas.width, canvas.height);
        return canvas.toDataURL("image/jpeg");;
    }
    
   $video.setAttribute("poster", createPoster($video));

于 2020-09-15T13:25:59.877 に答える