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

HTML5のpreload属性で動画の事前読み込みを制御する方法

HTML5のpreload属性とは

HTML5では、<video>タグにpreload属性を指定することで、ページ読み込み時に動画ファイルを事前にダウンロードするかどうかを制御できます。動画を再生するまでデータを読み込ませたくない場合は、preload="none"を設定します。これにより、ユーザーが再生ボタンを押すまで通信が発生せず、帯域幅の節約やページ表示速度の向上が期待できます。

preload属性に指定できる値

  • none: 動画を一切事前読み込みしません。再生開始時に初めてデータを取得します。
  • metadata: 動画の長さやサイズなどのメタ情報のみを読み込みます。
  • auto: ブラウザが必要と判断した範囲で動画全体を事前読み込みします(既定値)。

サンプルコード

以下のコードは、preload="none"を使って、再生前の動画読み込みを防ぐ例です。

<!DOCTYPE html>
<html>
  <body>
    <video width = "350" height = "200" controls = "controls" preload = "none">
      <source src = "movie.mp4" type = "video/mp4" />
      <source src = "movie.ogg" type = "video/ogg" />
      お使いのブラウザはvideoタグに対応していません。
    </video>
  </body>
</html>

コードのポイント

  • widthとheightで動画プレーヤーのサイズを指定しています。
  • controls属性により、再生・一時停止などの操作パネルが表示されます。
  • <source>タグを複数記述することで、MP4形式に対応していないブラウザ向けにOGG形式へフォールバックできます。
  • <source>タグ内のテキストは、いずれの形式にも対応していない環境での代替メッセージとして表示されます。

なお、モバイル回線など通信量が限られる環境ではpreload="none"が特に有効ですが、再生開始までの待ち時間が長くなる点には注意してください。用途に応じてmetadataとの使い分けを検討するとよいでしょう。

  1. HTMLのheight属性とは？使い方と対応要素をわかりやすく解説

    HTMLのheight属性は、要素の高さを宣言するために使用される属性です。値は基本的にピクセル（px）単位で指定します。height属性の基本注意： HTML5以降では、高さを「%」（パーセント）で指定する方法のサポートが廃止されました。そのため、height属性には数値のみを指定します。height属性を持つ主なHTML要素は以下の通りです。canvasembediframeimginputobjectvideoこれらの要素に対してheight属性を設定することで、ページ上に表示される際の縦幅を明示的に制御できます。特に画像や動画などのメディア要素では、レイアウトの崩れを防ぎ、ページ読み込

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

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