HTML5 Canvasで動画を再生し、最後のフレーム（静止画）を保持する方法

HTML5 Canvasで動画の最終フレームを保持する

HTML5の<video>要素は、再生が終了するとデフォルトでは指定したポスター画像や真っ黒な画面に戻ってしまいます。そこで、Canvasに動画のフレームを描画し続けることで、再生終了後も最後のフレーム（静止画）をそのまま表示させることができます。

実装コード

以下のコードを実行して、動画をCanvas上で再生し、最後のフレームを保持してみてください。

var c = $('canvas')[0];
var context = c.getContext('2d');

c.width = 640;
c.height = 480;

$('#myPlayer').on('play', function (e) {
    var $this = this;
    (function loop() {
        if (!$this.paused && !$this.ended) {
            context.drawImage($this, 0, 0, 640, 480);
            setTimeout(loop, 1000 / 30);
        }
    })();
});

コードのポイント

• canvas要素の取得： $('canvas')[0]でDOMからcanvas要素を取得し、2D描画コンテキストを生成します。
• サイズ設定： widthとheightを640×480に設定し、動画の解像度に合わせています。
• playイベント： 動画の再生開始を検知したタイミングでループ処理を起動します。
• drawImage()： 動画の現在のフレームをCanvasに描画します。
• ループ処理： setTimeout()により約30fpsで繰り返し描画し、動画が一時停止・終了するまで継続します。

より滑らかな描画にはrequestAnimationFrameがおすすめ

setTimeout()の代わりにrequestAnimationFrame()を使用すると、ブラウザのリフレッシュレートに同期した滑らかな描画が可能になります。また、動画が終了（ended）してもCanvasへの再描画を行わなければ、最後に描画されたフレームがそのまま残るため、結果的に最終フレームを保持できます。

この手法は、動画サムネイルの自動生成や、再生終了時にエンドカード風の静止画面を見せたい場合などに活用できます。