May 14th,2016
＃
要素について
| カテゴリー | なし |
| 利用場所 | “audio”要素もしくは“video”要素の子要素として(ただし、フロー・コンテンツや“track”要素よりも前) “picture”要素の子要素として(ただし、フロー・コンテンツや“img”要素よりも前) |
| 内容 | 空 |
| タグの省略 | 終了タグはありません |
“source”要素は“picture”要素、“audio”要素、“video”要素に選択可能なリソースを複数指定する要素です。
“source”要素は一般的に同じコンテンツを複数のファイル形式で提示するために使用します。ブラウザは提示されたリソースの中から適切なものを選択して使用します。
サンプルコード
画像ファイル
<p>
<picture>
<source srcset="sample.svg" type="image/svg+xml">
<img src="sample.png" alt="サンプル画像">
</picture>
</p>
音声ファイル
<p>
<audio 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>
<video controls style=" max-width: 100%;">
<source src="sample.mp4" type="video/mp4">
<source src="sample.webm" type="video/webm">
<source src="sample.ogv" type="video/ogg">
動画ファイルを再生できません
</video>
</p>
＃
属性と値
親要素が“audio”要素、“video”要素の場合
| 属性 | 値 | ||
|---|---|---|---|
| 属性 | 説明 | 値 | 説明 |
| 必須属性 | |||
| src="" | リソースの指定 | URL | リソースのURL |
| 任意属性 | |||
| グローバル属性 | |||
| type="" | リソースのMIMEタイプ | MIMEタイプ | リソースのMIMEタイプ |
親要素が“picture”要素の場合
| 属性 | 値 | ||
|---|---|---|---|
| 属性 | 説明 | 値 | 説明 |
| 必須属性 | |||
srcset="" |
使用可能なリソースのセット | URL 画像の横幅w,URL 画像の横幅w,... | 画像が表示される横幅ごとの表示する画像のURL |
| URL デバイスピクセル比x,URL デバイスピクセル比x,... | デバイスピクセル比ごとの表示する画像のURL | ||
| 任意属性 | |||
| グローバル属性 | |||
| type="" | リソースのMIMEタイプ | MIMEタイプ | リソースのMIMEタイプ |
| sizes="" |
画像を表示するサイズ | 長さ | 【“srcset”属性を幅記述子(“w”)で指定した時】画像の表示サイズの横幅 |
| メディアクエリ 長さ,メディアクエリ 長さ,...,長さ | 【“srcset”属性を幅記述子(“w”)で指定した時】メディア条件ごとの画像の表示サイズの横幅 | ||
| media="" |
リソースが対象とするメディア | メディアクエリ | リソースが対象とするメディア条件 |
width="" |
画像の横幅 | 正の整数 | 画像の横幅のピクセル数 |
| height="" |
画像の高さ | 正の整数 | 画像の高さのピクセル数 |
“sizes”属性は幅記述子(“w”)が使用された“srcset”属性が指定されている場合は必須です。
＃
仕様書
“source”要素はHTML5から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。
DOMインターフェース
[Exposed=Window]
interface HTMLSourceElement : HTMLElement {
[HTMLConstructor] constructor();
[CEReactions] attribute USVString src;
[CEReactions] attribute DOMString type;
[CEReactions] attribute USVString srcset;
[CEReactions] attribute DOMString sizes;
[CEReactions] attribute DOMString media;
[CEReactions] attribute unsigned long width;
[CEReactions] attribute unsigned long height;
};
UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);
source {
display: none;
}
