?
This document uses PHP Chinese website manual Release
該HTML <source> 元素為<picture>，<audio>或<video>元素指定多個媒體資源。這是一個空的元素。它通常用于提供不同瀏覽器支持的多種格式的相同媒體內(nèi)容。
內(nèi)容類別 | 沒有。 |
|---|---|
允許的內(nèi)容 | 沒有，這是一個空的元素。 |
標(biāo)記遺漏 | 它必須有開始標(biāo)記，但不能有結(jié)束標(biāo)記。 |
允許父母 | 媒體元素<audio>或<video> - 必須放在任何流內(nèi)容或<track>元素之前。一個<picture>元素，它必須放在<img>元素之前。 |
允許ARIA角色 | 沒有 |
DOM界面 | HTMLSourceElement |
屬性
這個元素包含全局屬性。
sizes是源大小的列表，它描述了源代表的圖像的最終渲染寬度。每個源大小由逗號分隔的媒體條件長度對列表組成。這個信息被瀏覽器用來確定，在放下頁面之前，定義哪個圖像以srcset供使用。
sizes屬性只有當(dāng)<source>元素是元素的直接子元素時，該屬性才有效果<picture>。媒體資源的src必填項(xiàng)<audio>和<video>地址。<source>元素放置在<picture>元素中時，該屬性的值將被忽略。srcset以逗號分隔的一個或多個字符串的列表，表示由瀏覽器使用的源代表的一組可能的圖像。每個字符串由以下組成：
一個圖像的URL，
一個寬度描述符，這個正整數(shù)直接跟在后面
'w'。缺省值是缺省值，即無窮大。
一個像素密度描述符，這是一個正的浮動數(shù)字之后
'x'。缺省值是缺省值1x。
列表中的每個字符串必須至少有一個寬度描述符或像素密度描述符才是有效的。在列表中，只能有一個包含寬度描述符和像素密度描述符的元組的字符串。
瀏覽器選擇最適合的圖像在給定的時間點(diǎn)顯示。
srcset只有當(dāng)<source>元素是元素的直接子元素時，該屬性才有效果<picture>。
type資源的MIME類型，可選地帶有一個codecs參數(shù)。有關(guān)如何指定編解碼器的信息，請參閱RFC 4281。媒體查詢資源的預(yù)期媒體; 這應(yīng)該只用于一個元素。media<picture>
如果未指定type屬性，則從服務(wù)器檢索媒體類型并檢查Gecko是否可以處理; 如果無法呈現(xiàn)，則檢查下一個源。如果指定了type屬性，則將其與Gecko可以播放的類型進(jìn)行比較，如果沒有被識別，服務(wù)器甚至不會被查詢; 而是一次檢查下一個源元素。
例子
本示例演示如何為瀏覽器支持Ogg格式的用戶提供Ogg格式的視頻，以及支持瀏覽器的用戶使用QuickTime格式的視頻。如果瀏覽器不支持audioor video元素，則會顯示通知。如果瀏覽器支持該元素，但不支持任何指定格式，error則會引發(fā)事件，并且默認(rèn)媒體控件（如果啟用）將指示錯誤。另請參閱各種瀏覽器中音頻和視頻元素支持的媒體格式列表。
<video controls> <source src="foo.webm" type="video/webm"> <source src="foo.ogg" type="video/ogg"> <source src="foo.mov" type="video/quicktime"> I'm sorry; your browser doesn't support HTML5 video.</video>
規(guī)范
Specification | Status | Comment |
|---|---|---|
HTML Living StandardThe definition of '<source>' in that specification. | Living Standard |
瀏覽器兼容性
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
Basic Support | (Yes) | (Yes) | 3.51 | 9 | (Yes) | (Yes) |
media | (Yes) | (Yes) | 15 | 9 | (Yes) | (Yes) |
sizes | (Yes) | (Yes) | 38 332 | ? | ? | ? |
src | (Yes) | (Yes) | 3.5 | 9 | (Yes) | (Yes) |
srcset | (Yes) | (Yes) | 38 332 | ? | ? | ? |
type | (Yes) | (Yes) | 3.5 | 9 | (Yes) | (Yes) |
Feature | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|---|
Basic Support | (Yes) | (Yes) | (Yes) | 11 | ? | ? | ? |
media | (Yes) | (Yes) | (Yes) | 15 | ? | ? | ? |
sizes | (Yes) | (Yes) | (Yes) | 38 332 | ? | ? | ? |
src | (Yes) | (Yes) | (Yes) | 1 | ? | ? | ? |
srcset | (Yes) | (Yes) | (Yes) | 38 332 | ? | ? | ? |
type | (Yes) | (Yes) | (Yes) | 1 | ? | ? | ? |