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

HTML5のonendedイベントで動画・音声プレイリストを作成する方法

HTMLとJavaScriptを組み合わせることで、動画や音声に手軽にプレイリスト機能を追加できます。その鍵となるのがonendedイベントです。

onendedイベントは、音声や動画が最後まで再生し終えたタイミングで発生します。このイベントを活用すれば、「ご視聴ありがとうございました」「次回もお楽しみに！」といったメッセージを表示できるだけでなく、次のクリップへ自動的に切り替えるプレイリストとしても機能させられます。

基本の実装例

まずは、onended属性を使ったシンプルなサンプルコードです。動画の再生が終わると、アラートでメッセージが表示されます。実際にブラウザで動かして、挙動を確認してみてください。

<!DOCTYPE HTML>
<html>
   <body>
      <video width = "300" height = "200" controls onended = "display()">
         <source src = "/html5/foo.ogg" type = "video/ogg" />
         お使いのブラウザはvideo要素に対応していません。
      </video>
      <script>
         function display() {
            alert ("ご視聴ありがとうございました！次回もお楽しみに！");
         }
      </script>
   </body>
</html>

次の動画を自動再生してプレイリスト化する

プレイリストとして使いたい場合は、onendedイベントの中で次のクリップを読み込みます。以下のコードのように、再生終了時に次の動画ファイルのパスをsrc属性へ設定するだけで、連続再生が実現できます。

<script >
   var next = "path/of/next/video.mp4";
   var video = document.getElementById('video');
   video.onended = function(){
   video.src = next;
}
</script>
<video id = "video" src = "path/of/current/video.mp4" autoplayautobuffer controls />

複数の動画を連続再生するコツ

動画URLを配列で管理し、インデックスを順番に進める方法がおすすめです。次のようなイメージで実装すると、3本以上の動画でも柔軟に対応できます。

<script>
   var videos = ["video1.mp4", "video2.mp4", "video3.mp4"];
   var current = 0;
   var video = document.getElementById("video");

   video.onended = function() {
     current++;
     if (current < videos.length) {
       video.src = videos[current];
       video.play();
     }
   };
</script>

このようにonendedイベントを使えば、外部ライブラリに頼らずとも、標準のHTML5とJavaScriptだけで簡易的なプレイリスト機能を構築できます。動画学習サイトや音楽再生ページなど、さまざまな場面で応用してみてください。

  1. HTML DOM Videoのseekableプロパティとは？シーク可能範囲の取得方法を解説

    HTML DOM Video の seekable プロパティとは HTML DOM の Video seekable プロパティは、動画内でシーク（再生位置の移動）が可能な範囲の情報を保持した TimeRanges オブジェクトを返します。このオブジェクトには、シーク可能な範囲の長さや、開始位置・終了位置が含まれています。 特にストリーミング配信では、動画データが完全に読み込まれる前に再生が始まるため、必ずしも動画全体を自由に移動できるとは限りません。seekable プロパティを使えば、「いまどこまで再生位置を動かせるのか」を JavaScript から正確に判定できます。 構文 seek

  2. HTML DOM Video preloadプロパティの使い方を徹底解説

    HTML DOM Video preloadプロパティとはHTML DOM の Video preload プロパティは、動画データをいつ読み込むべきかを制作者が指定した値に対応する文字列を返します。この設定は、ブラウザ側の判断（通信環境やユーザー設定など）によって無視される場合がある点に注意してください。デフォルト値は 「metadata」です。構文以下が構文の基本形です。文字列値を取得する場合mediaObject.preloadpreload に文字列を設定する場合mediaObject.preload = auto | metadata | none;preload に指定できる値au