<source src="">

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 ---
利用場所 video要素またはaudio要素の子要素として(ただし、フロー・コンテンツtrack要素よりも前) / picture要素の子要素として(ただし、img要素よりも前)HTML 5.1のみ
内容

source要素は、再生候補となるメディアファイル(動画・音声)や、レスポンシブイメージで使用する画像ファイルを指定します。この要素は、video要素audio要素picture要素の子要素として使用します。

  • video要素、またはaudio要素内で使用する場合と、picture要素内で使用する場合とでは、指定できる属性が異なります。そのため、以下の内容は2つの項目に分けて解説しています。

<source src="example.mp4" type="video/mp4">

<source src="example.mp3" type="audio/mp3">

<source media="(min-width: 640px)" srcset="medium.jpg">

video要素またはaudio要素の子要素として使用する場合

属性
必須属性
src="" 動画・音声の指定 URL 再生候補となる動画または音声のURL
任意属性
type="" 動画・音声のMIMEタイプ MIMEタイプ (同時にコーデック名を指定することも可能)

source要素を使用することで、video要素またはaudio要素に対して、複数の再生候補(形式の異なる動画・音声データ)を提供することができます。

例えば、video要素内で使用した場合は次のようになります。

<video>

<source src="example.mp4">
<source src="example.webm">
<source src="example.ogv">

</video>

上記の例では、3タイプの動画ファイルを指定しています(内容は全て同じ)。このように指定しておくことで、ブラウザ側が対応している形式(ファイル)で再生されるようになります。例えば、MP4形式に対応しているブラウザであれば、example.mp4 が再生されることになります。

source要素の配置位置

source要素は、video要素またはaudio要素内の最初の部分(代替コンテンツよりも前)に配置する必要があります。

<video>

<source src="example.mp4">
<source src="example.webm">
<source src="example.ogv">

代替コンテンツはsource要素の後に配置します。

</video>

MIMEタイプの指定

メディアファイル(動画・音声)のMIMEタイプを指定しておくと、ブラウザがそのファイルを取得する前に再生可能かどうかを判断できるようになります。(その結果、トラフィックを軽減できるようになります)

次の例では、3つのファイルに対してMIMEタイプを指定しています。この場合、video/mp4 にのみ対応したブラウザでは、example.webmexample.ogv をスキップして example.mp4 のみを取得しようとします。

<video>

<source src="example.webm" type="video/webm">
<source src="example.ogv" type="video/ogg">
<source src="example.mp4" type="video/mp4">

</video>

また、同時にコーデック名を指定することもできます。この情報を指定する場合は、MIMEタイプに続けてcodecsパラメータを記述します。

type='MIMEタイプ; codecs="コーデック名"'

具体的な記述例は次のようになります。

<source src='example.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  • メディアファイルの形式ごとに、対応するコーデック名が存在します。上記の例では、avc1.42E01EH.264mp4a.40.2AAC を意味している(?)らしいです。(仕様書に複数の例が紹介されているので、興味のある方はそちらを参考にしてください)

picture要素の子要素として使用する場合

属性
必須属性
srcset="" [5.1]画像の候補 URL 画像ファイルのURL
URL 横幅w ビューポートの幅による切り替え: 画像ファイルのURL、画像ファイルの横幅(ピクセル数)、記述子(w
URL 比率x デバイスピクセル比による切り替え: 画像ファイルのURL、比率を示す数値、記述子(x
任意属性
type="" 画像のMIMEタイプ MIMEタイプ 画像のMIMEタイプを指定
media="" [5.1]対象とするメディア メディアクエリ 画像の埋め込み対象とするメディアを指定
sizes="" [5.1]ブレイクポイント、画像の表示サイズ メディアクエリ 表示サイズ(vw メディアクエリ、画像の表示サイズ(横幅)、割合で指定する場合は vw
  • srcset属性で画像の横幅( w )を指定する場合は、sizes属性の指定も必要となります。

source要素を使用することで、picture要素に対して複数の画像候補を提供することができます。

<picture>

<source media="(min-width: 1280px)" srcset="large.jpg">
<source media="(min-width: 640px)" srcset="medium.jpg">

<img src="small.jpg" alt="サンプル">

</picture>

上記の例では、2種類(img要素を含めると3種類)の画像ファイルを指定しています。このように指定しておくことで、ユーザーの閲覧環境に適した画像が表示されるようになります。


picture要素内で使用するsource要素については、下記のページを参考にしてください。

HTML 5.1における変更点
  • picture要素の子要素として使用できるようになりました。
  • srcset属性、sizes属性、media属性が追加されました。

使用例


<audio preload="metadata" controls>

<source src="example.m4a" type="audio/aac">
<source src="example.mp3" type="audio/mp3">
<source src="example.ogg" type="audio/ogg">

<p>音声を再生することができませんでした。</p>

</audio>