このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

audio”要素~“preload”属性

記事May 14th,2016
July 7th,2020
データの事前読み込みを指定する属性
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

preload”属性について

preload”属性はページを読み込む際に音声コンテンツのファイルの読み込みを開始するべきかどうかのヒントをブラウザに与えます。これはブラウザに対して指定した動作を強制するものではないため、確実に指定した通りの動作になるとは限りません。

preload”属性を指定していない場合の既定値はブラウザによって違います。また、autoplay”属性を指定している場合は“preload”属性の指定にかかわらずページを読み込むときにデータの読み込みが開始されます。

指定できる値

属性値 説明
none 事前読み込みしない(データを再生する時まで読み込まない)
metadata ページを読み込む時にメタデータのみ読み込む
auto ページを読み込む時にデータの読み込みを開始しても良い

サンプルコード

事前読み込みしない
<p>
<audio preload="none" controls>
<source src="sample.mp3" type="audio/mp3">
<source src="sample.wav" type="audio/wav">
<source src="sample.ogg" type="audio/ogg">
音声を再生できません
</audio>
</p>
メタデータのみ読み込む
<p>
<audio preload="metadata" controls>
<source src="sample.mp3" type="audio/mp3">
<source src="sample.wav" type="audio/wav">
<source src="sample.ogg" type="audio/ogg">
音声を再生できません
</audio>
</p>
事前読み込みしても良い
<p>
<audio preload="auto" controls>
<source src="sample.mp3" type="audio/mp3">
<source src="sample.wav" type="audio/wav">
<source src="sample.ogg" type="audio/ogg">
音声を再生できません
</audio>
</p>
事前読み込みしない

メタデータのみ読み込む

事前読み込みしても良い

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク