HTML5キャンバス内にビデオを表示する方法

HTML5キャンバス内にビデオを表示する方法

HTML5のcanvas要素を使えば、再生中の動画をキャンバス上に描画することができます。以下のコード例では、<video>要素の再生内容をリアルタイムでキャンバスに描画する方法を紹介します。

サンプルコード

var canvas1 = document.getElementById('canvas');
var context = canvas1.getContext('2d');
var video = document.getElementById('video');
video.addEventListener('play', function () {
   var $this = this;
   (function loop() {
      if (!$this.paused && !$this.ended) {
         context.drawImage($this, 0, 0);
         setTimeout(loop, 1000 / 30);
      }
   })();
}, 0);

コードの解説

1. キャンバスとコンテキストの取得
getElementByIdでcanvas要素を取得し、getContext('2d')で2D描画コンテキストを取得します。すべての描画操作はこのコンテキストを通じて行われます。

2. 動画の再生イベントの監視
addEventListener('play', ...)により、動画が再生開始されたタイミングで描画処理が起動します。

3. ループ処理による描画
動画が一時停止（paused）や終了（ended）していない間、drawImage()を使って現在のフレームをキャンバスに描画し続けます。setTimeout(loop, 1000 / 30)により、約30fps（1秒間に30フレーム）の間隔で繰り返し描画されるため、滑らかな動画表示が実現できます。

注意点

より高精度な描画タイミングが必要な場合は、setTimeoutの代わりにrequestAnimationFrameを使用するのがおすすめです。ブラウザのリフレッシュレートに同期されるため、より効率的で滑らかなアニメーションが可能になります。また、別ドメインの動画を描画する場合はCORS制限によりキャンバスが汚染されることがあるため、crossorigin属性の設定に注意してください。