HTML5 ビデオの終了検知をマスター！動画の終わりにアクションを起こせる魔法のテクニック

2024-05-17

HTML5 ビデオの終了検知：わかりやすい日本語解説

ended イベントは、HTML5 ビデオ要素の再生が完了したときに発生するイベントです。このイベントを利用することで、動画終了後の処理を記述することができます。

コード例:

<video id="myVideo" width="320" height="240">
  <source src="https://example.com/video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<script>
  const video = document.getElementById('myVideo');

  video.addEventListener('ended', () => {
    console.log('動画が終了しました！');
    // 動画終了後の処理を記述
  });
</script>

解説:

video 変数に、ID myVideo で指定されたHTML5 ビデオ要素を取得します。
addEventListener メソッドで、ended イベントにイベントリスナーを登録します。
イベントリスナー内の関数では、console.log でメッセージを出力しています。この部分を、動画終了後の処理に置き換えてください。

注意点:

ended イベントは、動画の自然な終了時のみ発生します。シークバー操作や手動停止による終了には対応しません。
ブラウザによっては、ended イベントが発生しない場合があります。

timeupdate イベントと currentTime プロパティ

timeupdate イベントは、HTML5 ビデオの再生時間が更新されるたびに発生するイベントです。currentTime プロパティは、動画の現在の再生時間を取得することができます。これらの要素を組み合わせることで、動画の終了を検知することができます。

<video id="myVideo" width="320" height="240">
  <source src="https://example.com/video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<script>
  const video = document.getElementById('myVideo');
  const duration = video.duration; // 動画の総再生時間

  video.addEventListener('timeupdate', () => {
    if (video.currentTime >= duration) {
      console.log('動画が終了しました！');
      // 動画終了後の処理を記述
    }
  });
</script>

duration 変数に、video.duration で動画の総再生時間を取得します。
timeupdate イベントにイベントリスナーを登録します。
イベントリスナー内の関数では、video.currentTime で現在の再生時間を取得し、duration と比較します。

timeupdate イベントは、動画再生中に頻繁に発生するため、処理負荷が高くなる可能性があります。
ブラウザによっては、duration プロパティが正確な値を返さない場合があります。

HTML5 ビデオの終了検知は、ended イベントと timeupdate イベントの2つの方法で実現できます。それぞれの方法にはメリットとデメリットがあるため、目的に合った方法を選択してください。

HTML5 ビデオ終了検知：サンプルコード集

動画終了後に別の動画を再生する

<video id="myVideo1" width="320" height="240">
  <source src="https://example.com/video1.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<video id="myVideo2" width="320" height="240" style="display: none;">
  <source src="https://example.com/video2.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<script>
  const video1 = document.getElementById('myVideo1');
  const video2 = document.getElementById('myVideo2');

  video1.addEventListener('ended', () => {
    video2.style.display = 'block';
    video2.play();
  });
</script>

説明:

2つのHTML5 ビデオ要素を用意します。myVideo1 は最初の動画、myVideo2 は2番目の動画です。
video1 の ended イベントで、video2 を表示して再生します。

動画終了後にメッセージを表示する

<video id="myVideo" width="320" height="240">
  <source src="https://example.com/video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<div id="message" style="display: none;">動画が終了しました！</div>

<script>
  const video = document.getElementById('myVideo');
  const message = document.getElementById('message');

  video.addEventListener('ended', () => {
    message.style.display = 'block';
  });
</script>

動画終了後に表示するメッセージ用の要素を用意します。

動画終了後にフォームを表示する

<video id="myVideo" width="320" height="240">
  <source src="https://example.com/video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<form id="myForm" style="display: none;">
  </form>

<script>
  const video = document.getElementById('myVideo');
  const form = document.getElementById('myForm');

  video.addEventListener('ended', () => {
    form.style.display = 'block';
  });
</script>

動画終了後にAjaxリクエストを送信する

<video id="myVideo" width="320" height="240">
  <source src="https://example.com/video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<script>
  const video = document.getElementById('myVideo');

  video.addEventListener('ended', () => {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'https://example.com/');
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onload = () => {
      if (xhr.status === 200) {
        console.log('Ajaxリクエストが成功しました！');
      } else {
        console.error('Ajaxリクエストが失敗しました。');
      }
    };
    xhr.send('data=video_ended');
  });
</script>

動画終了後にAjaxリクエストを送信します。この例では、https://example.com/ にダミーのURLを指定していますが、実際には目的に合ったURLに変更してください。

これらのサンプルコードはあくまでも一例であり、目的に合わせて自由にカスタマイズすることができます。

上記のコード例は、基本的な動作のみを示しています。実用的なアプリケーションでは、エラー処理

HTML5 ビデオ終了検知：その他の方法

play() メソッドは、HTML5 ビデオの再生を開始するメソッドです。このメソッドが終了すると、動画が終了したことを意味します。ただし、この方法はブラウザによっては動作しない場合があります。

<video id="myVideo" width="320" height="240">
  <source src="https://example.com/video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<script>
  const video = document.getElementById('myVideo');

  video.play().then(() => {
    console.log('動画が終了しました！');
    // 動画終了後の処理を記述
  });
</script>

durationchange イベントは、HTML5 ビデオの総再生時間が変更されたときに発生するイベントです。このイベントを利用することで、動画の総再生時間を取得し、timeupdate イベントと同様に終了検知を行うことができます。

<video id="myVideo" width="320" height="240">
  <source src="https://example.com/video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<script>
  const video = document.getElementById('myVideo');
  let duration;

  video.addEventListener('durationchange', () => {
    duration = video.duration;
  });

  video.addEventListener('timeupdate', () => {
    if (video.currentTime >= duration) {
      console.log('動画が終了しました！');
      // 動画終了後の処理を記述
    }
  });
</script>