We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

MediaSource.MediaSource()

這是一個實驗中的功能
此功能在某些瀏覽器尚在開發中,請參考兼容表格以得到不同瀏覽器用的前輟。

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+ 上有效。

相關資料

文件標籤與貢獻者

此頁面的貢獻者: aChinKaiWu
最近更新: aChinKaiWu,