HTMLのvideo要素でループ再生する方法


  1. loop属性の使用: video要素にloop属性を追加することで、動画をループ再生することができます。例えば、以下のようになります:
<video loop>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

上記の例では、video要素にloop属性を追加しています。動画ファイルのパスはsrc属性で指定し、type属性でファイルの形式を指定します。

  1. JavaScriptを使用してループ再生する: JavaScriptを使用して動画をループ再生することもできます。以下の例では、JavaScriptを使ってvideo要素の終了時に再生をリセットし、ループ再生を実現しています。
<video id="myVideo" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
<script>
  var video = document.getElementById("myVideo");
  video.addEventListener('ended', function() {
    this.currentTime = 0;
    this.play();
  }, false);
</script>

上記の例では、video要素にid属性を追加し、JavaScriptでその要素を取得しています。endedイベントが発生した際に、currentTimeプロパティを0にリセットし、再生を開始することでループ再生を実現しています。

これらの方法を使用することで、HTMLのvideo要素を使って動画をループ再生することができます。必要に応じて、動画ファイルのパスや属性を適切に設定してください。