< source 【 ソース 】 属性="属性値">

source要素はaudio要素、video要素、picture要素に対して、選択可能なファイルを複数指定します。複数のファイルを用意することで、閲覧者の環境に合わせて適切なファイルが選択されます。

カテゴリー	なし
コンテンツモデル	空
使用できる文脈	audio要素またはvideo要素の子要素として記述可。ただし、すべてのフローコンテンツやtrack要素より前に記述する。

カテゴリーとコンテンツモデル

使用できる属性

media 【メディア 】

リンク先の文書や読み込む外部リソースがどのメディアに適用するのかを指定します。media属性の値は、妥当なメディアクエリである必要があります。

src 【ソース 】

文書内に埋め込む音声・動画ファイルのURLを指定します。

srcset 【 ソースセット 】

img要素と同様に、複数のイメージソースを指定できます。

type 【タイプ 】

リンク先のMIMEタイプを指定します。

グローバル属性

すべての要素で使用できる属性です。
グローバル属性とイベントハンドラ属性

サンプルコード

以下の例では、audio要素で読み込む音声ファイルを3種類のフォーマットで提供しています。閲覧者の環境に合わせて再生可能なファイルが表示されます。

<audio controls="controls">
  <source src="/sample.ogg" type="audio/ogg">
  <source src="/sample.wav" type="audio/wave">
  <source src="/sample.mp4" type="audio/mp4">
  <!--省略-->
</audio>

ポイント

• source要素はpicture要素で使用し、img要素で解説したsrcset属性やlink要素で解説したsize属性を使うことで、イメージソースを出し分けられます。

関連記事

• audio　音声ファイルを埋め込む
• video　動画ファイルを埋め込む