HTMLSourceElement インターフェイスは <source> 要素を操作するための (継承によって利用できる、通常の HTMLElement オブジェクトインターフェイスにから見て) 特別なプロパティを提供します。
<div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/ja/docs/Web/API/EventTarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ja/docs/Web/API/Node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#D4DDE4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ja/docs/Web/API/Element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#D4DDE4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ja/docs/Web/API/HTMLElement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLElement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#D4DDE4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#D4DDE4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#D4DDE4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ja/docs/Web/API/HTMLSourceElement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLSourceElement</text></a></svg></div>
a:hover text { fill: #0095DD; pointer-events: all;}
プロパティ
親である HTMLElement からプロパティを継承しています。
HTMLSourceElement.keySystem- ストリームを暗号化するキーシステムを説明する
DOMStringです。 HTMLSourceElement.media- HTML の
media属性を反映するDOMStringで、メディアリソースの意図する型を含みます。 HTMLSourceElement.sizes- ブレークポイント間の画像の寸法を表す
DOMStringです。 HTMLSourceElement.src- HTML の
src属性を反映するDOMStringで、メディアリソースの URL が入ります。HTMLSourceElement.srcプロパティは関連する<source>要素が<video>や<audio>要素などのメディア要素の中で入れ子になった場合のみ意味を持ちます。<picture>要素の中で入れ子になったときは意味を持たず、無視されます。メモ:srcプロパティが (兄弟要素によって) 更新された場合、親のHTMLMediaElementのloadメソッドが完了時に呼び出されます。<source>要素は自動的には再読み込みされないからです。 HTMLSourceElement.srcset- HTML の
srcset属性を反映するDOMStringで、コンマ (',', U+002C COMMA) で区切られた画像の候補のリストが入ります。画像の候補は URL の後に'w'に続いて画像の幅、または'x'に続いてピクセルの密度を指定します。 HTMLSourceElement.type- HTML の
type属性を反映するDOMStringで、メディアリソースの型が入ります。
メソッド
固有メソッドはありません。 HTMLElement インターフェイスからの継承メソッドが利用可能です。
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| Encrypted Media Extensions HTMLSourceElement の定義 |
勧告 | keySystem 属性を追加。 |
| HTML Living Standard HTMLSourceElement の定義 |
現行の標準 | HTML5 より変更なし。 |
| HTML5 HTMLSourceElement の定義 |
勧告 | 初回定義 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
| 機能 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| 基本対応 | あり | あり | 3.5 | 9 | あり | あり |
keySystem | あり | あり | あり1 | ? | ? | ? |
media | あり | あり | 3.5 | 9 | あり | あり |
sizes | あり | あり | 38 332 | ? | ? | ? |
src | あり | あり | 3.5 | 9 | あり | あり |
srcset | あり | あり | 38 332 | ? | ? | ? |
type | あり | あり | 3.5 | 9 | あり | あり |
| 機能 | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| 基本対応 | あり | あり | あり | 4 | あり | あり | ? |
keySystem | あり | あり | あり | あり1 | ? | ? | ? |
media | あり | あり | あり | 4 | あり | あり | ? |
sizes | あり | あり | あり | 38 332 | ? | ? | ? |
src | あり | あり | あり | 4 | あり | あり | ? |
srcset | あり | あり | あり | 38 332 | ? | ? | ? |
type | あり | あり | あり | 4 | あり | あり | ? |
1. This feature is behind the media.eme.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
2. From version 33: this feature is behind the dom.image.picture.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
関連情報
- このインターフェイスを実装する HTML 要素:
<source>. <source>要素を含むことができる要素の HTML DOM API:HTMLVideoElement,HTMLAudioElement,HTMLPictureElement.