HTML5 Video

HTML5 Videoは、webページにビデオを埋め込むための機能です。従来のFlashプラグインなどを必要とせず、ブラウザがビデオを直接再生できるようになりました。

ビデオ形式
videoタグ
属性
複数のビデオ形式のサポート
JavaScriptとの連携

ビデオ形式

HTML5 Video でサポートされている主なビデオ形式は以下のとおりです。

MP4（H.264ビデオコーデックとAACオーディオコーデックを使用）
WebM（VP8ビデオコーデックとVorbisオーディオコーデックを使用）
Ogg（TheoraビデオコーデックとVorbisオーディオコーデックを使用）

videoタグ

ビデオをウェブページに埋め込むには、<video>タグを使用します。基本的な構文は以下のとおりです。

<video src="your-video-file.mp4" controls></video>

属性

<video>タグには、いくつかの属性を追加できます。

src	ビデオファイルのURL。
controls	再生、一時停止、音量調整などのコントロールが表示されます。
width/height	ビデオの幅と高さを指定します。
autoplay	ページが読み込まれたときにビデオが自動的に再生されます。
loop	ビデオが終了したときに自動的に繰り返し再生されます。
muted	ビデオがミュート状態で再生されます。
poster	ビデオのサムネイル画像のURLを指定します。

複数のビデオ形式のサポート

異なるブラウザで異なるビデオ形式をサポートするため、複数のビデオ形式を提供することができます。これには、<source>タグを使用します。

<video controls>
  <source src="your-video-file.mp4" type="video/mp4">
  <source src="your-video-file.webm" type="video/webm">
  <source src="your-video-file.ogv" type="video/ogg">
  お使いのブラウザはビデオタグをサポートしていません。
</video>

JavaScriptとの連携

JavaScriptを使用して、ビデオの再生を制御したり、イベントを処理したり、より高度な機能を実現することができます。以下に、いくつかの例を示します。

再生と一時停止の制御

JavaScriptを使用して、ビデオの再生と一時停止を制御することができます。

以下の例では、playPause()関数でビデオの再生と一時停止を切り替えています。

<video id="myVideo" src="your-video-file.mp4" controls></video>
<button onclick="playPause()">再生/一時停止</button>

<script>
  var video = document.getElementById("myVideo");

  function playPause() {
    if (video.paused) {
      video.play();
    } else {
      video.pause();
    }
  }
</script>

イベントリスナーの追加

ビデオの再生が開始されたとき、終了したとき、一時停止したときなど、さまざまなイベントを処理することができます。

以下の例では、ビデオの再生が開始されるとコンソールにメッセージが表示されます。

<video id="myVideo" src="your-video-file.mp4" controls></video>

<script>
  var video = document.getElementById("myVideo");

  video.addEventListener("play", function() {
    console.log("ビデオの再生が始まったぞ。");
  });
</script>

ビデオの進捗状況の表示

JavaScriptを使用して、ビデオの再生進捗を表示するカスタムコントロールを作成することができます。

以下の例では、<progress>タグを使用してビデオの進捗状況を表示しています。

<video id="myVideo" src="your-video-file.mp4" controls></video>
<progress id="progressBar" value="0" max="100"></progress>

<script>
  var video = document.getElementById("myVideo");
  var progressBar = document.getElementById("progressBar");

  video.addEventListener("timeupdate", function() {
    var progress = (video.currentTime / video.duration) * 100;
    progressBar.value = progress;
  });
</script>