JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTML5・JavaScriptでビデオプレーヤーのスナップショットを撮る方法

HTML5の<video>要素とJavaScriptを組み合わせると、再生中の動画から簡単にスナップショット（静止画）を撮影できます。仕組みはシンプルで、<canvas>要素にdrawImage()メソッドを使って現在表示中の動画フレームを描画するだけです。

スナップショット撮影の基本の流れ

実装の手順は以下のとおりです。

  • <video>要素で動画を読み込む
  • スナップショットの描画先として<canvas>要素を用意する
  • loadedmetadataイベントで動画の実際のサイズ（videoWidth / videoHeight）を取得し、アスペクト比を維持したままキャンバスサイズを調整する
  • ボタンがクリックされたらdrawImage()で動画の現在フレームをキャンバスに描画する

サンプルコード

以下のコードを実行すると、HTML5＋JavaScriptベースのビデオプレーヤーからスナップショットを撮影できます。

<!DOCTYPE html>
<html>
<body>
   <video controls>
      <source src = "new.mp4" type = "video/mp4">
   </video>
   <br>
   <canvas id = "canvas" width = "600" height = "300"></canvas>
   <br>
   <button id = "snap" onclick = "snap()">スナップショットを撮る</button>

   <script>
      var video = document.querySelector('video');
      var canvas = document.querySelector('canvas');
      var context = canvas.getContext('2d');
      var myWidth, myHeight, ratio;

      // 動画のメタデータ読み込み後に、アスペクト比を維持したサイズを設定
      video.addEventListener('loadedmetadata', function () {
         ratio = video.videoWidth / video.videoHeight;
         myWidth = video.videoWidth - 100;
         myHeight = parseInt(myWidth / ratio, 10);
         canvas.width = myWidth;
         canvas.height = myHeight;
      }, false);

      // 現在のフレームをキャンバスに描画してスナップショット化
      function snap() {
         context.fillRect(0, 0, myWidth, myHeight);
         context.drawImage(video, 0, 0, myWidth, myHeight);
      }
   </script>
</body>
</html>

コードのポイント解説

1. アスペクト比の維持

loadedmetadataイベントは、動画の幅や高さなどのメタデータが利用可能になったタイミングで発生します。ここでvideo.videoWidthとvideo.videoHeightから比率を計算することで、縦横比が崩れないスナップショットを得られます。

2. drawImage()によるフレームの描画

context.drawImage(video, x, y, width, height)は、第一引数に動画要素を渡すことで、その瞬間に表示されているフレームをそのまま画像としてキャンバスへ転写します。ボタンを押した時点の映像が静止画として記録される仕組みです。

3. 撮った画像を保存したい場合

キャンバス上の画像はcanvas.toDataURL()を使うことでPNG形式などのデータURLに変換でき、リンクのダウンロード属性と組み合わせればファイルとして保存することも可能です。

var link = document.createElement('a');
link.download = 'snapshot.png';
link.href = canvas.toDataURL();
link.click();

注意点

  • CORS（クロスオリジン）制限により、別ドメインの動画をそのまま描画するとキャンバスが汚染され、toDataURL()が使えなくなる場合があります。その場合はサーバー側でAccess-Control-Allow-Originヘッダーを設定し、video要素にcrossorigin属性を指定してください。
  • 動画がまだ読み込まれていない状態でスナップショットを押すと真っ黒な画像になるため、canplayイベントなどを待ってから操作を有効にするとより安全です。

このように、Canvas APIを活用すれば数行のコードでビデオプレーヤーのスナップショット機能を実装できます。サムネイル自動生成や動画編集ツールなど、さまざまな応用が可能です。

  1. Windows 10で動画をトリミングする方法｜写真アプリとビデオエディターの使い方を徹底解説

    Windows 10には、基本的な動画編集作業を行える多彩な動画編集ツールが標準搭載されています。簡単な動画編集のために、高価なソフトウェアを購入する必要はありません。家族の思い出の動画を楽しく編集したい場合も、YouTubeチャンネル用の動画を作りたい場合も、Windows 10の「ビデオエディター」がしっかりサポートしてくれます。この記事では、Windows 10で動画をトリミングするさまざまな方法を、最後までわかりやすく解説します。 Windows 10で動画をトリミングする方法 スマートフォンやデジタルカメラで撮影した動画は、思った以上に長くなってしまうことがあります。スマートフォン

  2. Googleドライブで動画の処理に時間がかかる原因と解決策を徹底解説

    Googleドライブは、PCの空き容量を確保したり、データをいつでもどこからでもアクセスできる場所に保存したりするのに最適なサービスです。しかし最近、「Googleドライブへの動画のアップロードやダウンロードに非常に時間がかかる」という声が多くのユーザーから寄せられています。さらに数時間待った後、次のようなエラーメッセージが表示されることもあります。 「この動画は処理中です。後ほどもう一度お試しください。」 これはよくある問題で、多くの人が経験しています。この記事では、問題の原因をわかりやすく解説し、具体的な解決方法をご紹介します。 Googleドライブで動画の処理に時間がかかる原因 ネッ