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 をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
| デスクトップ | モバイル | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
HTMLSourceElement | Chrome 完全対応 あり | Edge 完全対応 あり | Firefox 完全対応 3.5 | IE 完全対応 9 | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android ? |
keySystem | Chrome 完全対応 あり | Edge 完全対応 あり | Firefox
完全対応
あり
| IE ? | Opera ? | Safari ? | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android
完全対応
あり
| Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
media | Chrome 完全対応 あり | Edge 完全対応 12 | Firefox 完全対応 3.5 | IE 完全対応 9 | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android ? |
sizes | Chrome 完全対応 あり | Edge 完全対応 13 | Firefox
完全対応
38
| IE ? | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android
完全対応
38
| Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
src | Chrome 完全対応 あり | Edge 完全対応 12 | Firefox 完全対応 3.5 | IE 完全対応 9 | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android ? |
srcset | Chrome 完全対応 あり | Edge 完全対応 13 | Firefox
完全対応
38
| IE ? | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android
完全対応
38
| Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
type | Chrome 完全対応 あり | Edge 完全対応 12 | Firefox 完全対応 3.5 | IE 完全対応 9 | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android ? |
凡例
- 完全対応
- 完全対応
- 実装状況不明
- 実装状況不明
- 実験的。動作が変更される可能性があります。
- 実験的。動作が変更される可能性があります。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- ユーザーが明示的にこの機能を有効にしなければなりません。
関連情報
- このインターフェイスを実装する HTML 要素:
<source>. <source>要素を含むことができる要素の HTML DOM API:HTMLVideoElement,HTMLAudioElement,HTMLPictureElement.