HTML5で動画を読み込み時に自動再生して無限ループさせる方法

HTML5の<video>タグとは

<video>タグは、Webページに動画を埋め込むためのHTML5の標準要素です。現在、<video>要素でサポートされている動画形式は主に3種類あり、MP4、WebM、Oggが該当します。

また、autoplay属性を指定すると、ページの読み込み完了と同時に動画の再生が自動的に開始されます。

loop属性で動画を無限に繰り返し再生する

動画をエンドレスで再生したい場合に使うのがloop属性です。loop属性はブール型（真偽値）の属性で、この属性を指定しておくと、動画の再生が終了するたびに自動的に最初から再生し直されます。

つまり、動画を無限ループさせたいだけなら、loop属性を追加するだけで簡単に実現できます。

<video width="600" height="500" autoplay loop>
   <source src="movie.mp4" type="video/mp4" />
   <source src="movie.ogg" type="video/ogg" />
   お使いのブラウザはvideo要素をサポートしていません。
</video>

上記のコードでは、autoplay属性によってページ読み込み時に自動再生が始まり、loop属性によって動画が終わるたびに繰り返し再生されます。

loop属性がうまく動作しない場合の対処法

環境によってはloop属性が期待どおりに機能しないことがあります。そのような場合は、JavaScriptを使った代替方法が有効です。

具体的には、動画の再生が終了したときに発生する「ended」イベントをリッスンし、そのイベントが発火したタイミングでplay()メソッドを呼び出します。これにより、動画が終了するたびに再再生処理が実行され、結果として無限ループを実現できます。