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

【HTML】動画・音声をループ再生する方法｜loop属性の使い方を解説

HTMLのloop属性を使用すると、オーディオやビデオの再生が終了するたびに、自動的に最初から再生し直す（ループ再生する）ように指定できます。

この属性は、BGMや繰り返し見せたいプロモーション動画などに便利です。以下のコードを実行して、loop属性の実装方法を確認してみましょう。

サンプルコード

<!DOCTYPE HTML>
<html>
   <body>

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

   </body>
</html>

コードの解説

上記の例では、<video>要素にloop属性を追加しています。この属性が指定された動画は、最後まで再生された後に自動的に先頭へ戻り、再生が繰り返されます。

押さえておきたいポイント

  • loop属性はブール型属性のため、値を指定する必要はありません。属性名を書くだけで有効になります。
  • controls属性と組み合わせると、ユーザーが再生・一時停止などを操作できるコントロールが表示されます。
  • <source>要素を複数記述しておくと、ブラウザが対応している形式（OGG、MP4など）の動画が自動的に選択されます。

なお、音声ファイルをループ再生したい場合も同様に、<audio>要素にloop属性を追加するだけで簡単に実現できます。

  1. HTMLでページ読み込み時に音声・動画を読み込むかどうかを指定する方法（preload属性の使い方）

    HTMLのpreload属性とはHTMLでは、preload属性を使うことで、ページが読み込まれたときにオーディオや動画をどのように読み込むべきかについて、作成者がブラウザへヒントを与えられます。これにより、ユーザーにとって最適な体験を提供できます。preload属性は <audio> タグと <video> タグの両方で利用可能です。preload属性に指定できる値none：ページ読み込み時にメディアファイルを読み込みません。ユーザーが再生操作を行ったタイミングで初めてダウンロードされます。metadata：再生時間やファイルサイズなどのメタデータのみを読み込みます。

  2. 【HTML】ページ読み込み時に選択肢を初期選択する方法｜selected属性の使い方

    selected属性で初期選択を指定するHTMLでページが読み込まれた時点で特定の選択肢を選択済みの状態にしたい場合は、<select>要素内の該当する<option>要素にselected属性を指定します。通常、ドロップダウンリストでは先頭の項目が自動的に選択されて表示されますが、selected属性を使うことで、任意の項目をデフォルト値として設定できます。selected属性は論理属性のため、値を書かずに「selected」と記述するだけで有効になります。以下のコードを実行して、実際の動作を確認してみましょう。コード例<!DOCTYPE html> &l