このページについて
このページではHTMLで使う事ができるpreloadの機能と使い方の解説をしています。
preload属性
preloadはaudioタグ、videoタグに対して使う事ができる属性の1つです。これはブラウザに対して、「このページの作者はこの音声ファイルや動画ファイルについて読み込むかどうかをこんな感じで考えているよ」っていうのを伝える機能です。
簡単に言ってしまえば「ブラウザに対して読み込むかどうかの判断材料を渡す」的なアドバイザーですね。
preloadはこのように書きます。
<audio preload="値">
<source src="音声ファイル" type="audio/mp3">
</audio>
<video preload="値">
<source src="動画ファイル" type="video/mp4">
</video>preloadで使える値
preloadは値を与えることで真価を発揮します。
| auto | 作者が「ブラウザがオーディオファイル全体を読み込む必要がある」と判断した場合につかう |
|---|---|
| metadata | 作者が「ブラウザが読み込むのはメタデータのみ」と判断した場合に使う |
| none | 作者が「ブラウザが読み込む時にオーディオファイル等は読み込まなくて良い」と思う場合に使う |
当然ながらページの読み込みはユーザーエクスペリエンスにも影響します。わずか数秒の音声ファイルならまだしも、4K動画など明らかにファイルサイズが大きいものは読み込みに時間を要します。その場合にはページの読み込みを最優先するnoneか、時間を要してでもどうしても読み込ませたいautoなのか、そこはページにもよります。
preloadの注意点
preloadはautoplay属性があると無効になります。そこだけは注意しておきましょう。
まとめ
preloadはaudioタグとvideoタグで使えて、作者がどこまで読み込ませるかを指示できる属性です。ページの読み込み速度を重視するのか、どうしても見て欲しいから時間を使ってでも読み込んでもらうのかはページやコンテンツによります。適切に設定しましょう。
- HTMLの基礎
- HTMLってどんな言語？書き方やHTMLファイルの作成方法などを解説。
- HTMLタグで押さえておきたいポイント3選
- HTMLタグを使う上で必ず押さえておいてほしいポイント3つの解説です。
- HTMLタグと属性一覧
- HTMLタグと属性の一覧です。
- tableタグ生成ページ
- tableタグの基本形を生成できるページです。
- ulタグ・olタグ生成ページ
- ulタグとolタグの基本形を生成できるページです。