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

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

HTMLのpreload属性とは

HTMLでは、preload属性を使うことで、ページが読み込まれたときにオーディオや動画をどのように読み込むべきかについて、作成者がブラウザへヒントを与えられます。これにより、ユーザーにとって最適な体験を提供できます。preload属性は <audio> タグと <video> タグの両方で利用可能です。

preload属性に指定できる値

  • none：ページ読み込み時にメディアファイルを読み込みません。ユーザーが再生操作を行ったタイミングで初めてダウンロードされます。
  • metadata：再生時間やファイルサイズなどのメタデータのみを読み込みます。
  • auto：ブラウザが判断し、スムーズな再生のために必要な範囲でメディアを読み込みます。

以下のコードを実行して、preload属性の実装方法を確認してみてください。この例では「none」を指定しているため、ページ表示時に動画は事前に読み込まれません。

コード例

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

このようにpreload属性を使い分けることで、帯域幅の節約やページ表示速度の向上など、コンテンツの性質やユーザーの環境に応じた最適なメディア読み込みを実現できます。たとえば、必ず再生されるとわかっている動画には「auto」、アクセス頻度の低い動画には「none」を指定するのが効果的です。

  1. HTMLのmeta要素の使い方完全ガイド｜description・viewport・robotsタグの基礎とSEO対策

    この記事では、HTMLの<meta>要素の基本的な使い方から、SEO対策につながる実践的な活用方法までをわかりやすく解説します。 meta要素とは？ <meta>要素は、HTML文書に関するさまざまな種類のメタデータ（メタ情報）を定義するために使用される要素です。メタデータとは「情報」のことであり、より正確に言えば、他のデータについての説明や付加情報を提供するデータのことを指します。 <meta>要素には複数の属性と値が存在しますが、その中でもname属性は最も重要な属性の一つです。 name属性とdescriptionの設定 name属性にはいくつかの

  2. HTMLの<title>要素の正しい使い方とSEO対策のポイント

    この記事では、HTMLの<title>要素の基本的な使い方から、SEOにおける重要性までをわかりやすく解説します。 HTMLの<title>要素は、ウェブサイトのページタイトルを表す要素です。 ページタイトルの確認方法 閲覧中のウェブサイトのページタイトルを確認したい場合は、ブラウザのタブにマウスカーソルを合わせて数秒間静止してみましょう。完全なページタイトルがポップアップ表示されます。 以下はYouTubeで実際に試した例です。 <title>要素の書き方 <title>要素を作成するには、開始タグと終了タグを使い、その間にタイトルとなるテキ