這是一個實驗中的功能
此功能在某些瀏覽器尚在開發中,請參考兼容表格以得到不同瀏覽器用的前輟。
MediaSource
介面的 MediaSource()
建構子建構且回傳一個沒有與任何來源緩衝 (source buffer) 關聯的新 MediaSource
物件。
語法
var mediaSource = new MediaSource();
參數
無。
範例
以下的片段擷取自 Nick Desaulniers 所編纂的簡單範例(觀看實際演示,或者下載原始碼 以利更進一步研究。)
var video = document.querySelector('video');
var assetURL = 'frag_bunny.mp4';
// Need to be specific for Blink regarding codecs
// ./mp4info frag_bunny.mp4 | grep Codec
var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
var mediaSource = new MediaSource;
//console.log(mediaSource.readyState); // closed
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', sourceOpen);
} else {
console.error('Unsupported MIME type or codec: ', mimeCodec);
}
...
規格
規格 | 狀態 | 註釋 |
---|---|---|
Media Source Extensions The definition of 'MediaSource' in that specification. |
Recommendation | Initial definition. |
相容性表格
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 23 | 25.0 (25.0)[1] 42.0 (42.0) |
11[2] | 15 | 8 |
Feature | Android | Firefox Mobile (Gecko) | Firefox OS (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 4.4.4 |
No support |
No support | 11 | 30 | No support |
[1] 在切換 about:config
偏好設定 media.mediasource.enabled
為 true
時可以使用。此外,支援只限於白名單內的網站,如:YouTube, Netflix, 以及其他熱門的串流網站。白名單已經被移除且 Media Source Extensions 在 42+ 對所有網站已預設為啟用。
[2] 只在 Windows 8+ 上有效。