MediaSource

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

Media Source Extensions API 的 MediaSource 介面代表 HTMLMediaElement 物件的媒體資料來源。一個 MediaSource 物件可以被附加到一個 HTMLMediaElement 以被用戶代理 (user agent) 播放。

建構子 (Constructor)

MediaSource()
建構且回傳一個新的 MediaSource 物件但不與任何來源緩衝 (source buffers) 關聯 (associate)。

屬性 (Properties)

從親介面 (parent interface) EventTarget 繼承屬性。

MediaSource.sourceBuffers Read only
回傳一個含有與此 MediaSource 關聯的 SourceBuffer 物件串列的 SourceBufferList 物件。
MediaSource.activeSourceBuffers Read only
回傳一個 SourceBufferList 物件，含有 SourceBuffers 的子集合 SourceBuffer 物件 — 物件的串列提供被選擇的影片軌 (video track), 啟用的音軌 (audio tracks), 以及顯示或隱藏的字軌。
MediaSource.readyState Read only
回傳一個列舉類型表示目前 MediaSource 的狀態：沒有附加到媒體元件 (closed)，已經附加且可以接收 SourceBuffer 物件 (open)，已經附加但是串流已經經由 MediaSource.endOfStream() 結束 (ended)。
MediaSource.duration
取得或設置現在正被表示的媒體的時間長度。

方法 (Methods)

從親介面 (parent interface) EventTarget 繼承屬性。

MediaSource.addSourceBuffer()
依據指定的 MIME 類型建立一個新的 SourceBuffer 且將其加入 MediaSource 的 SourceBuffers 串列。
MediaSource.removeSourceBuffer()
從與此 MediaSource 物件關聯的 SourceBuffers 串列移除指定的 SourceBuffer。
MediaSource.endOfStream()
示意串流的結束。

靜態方法 (Static methods)

MediaSource.isTypeSupported()
回傳一個 Boolean 值表示指定的 MIME 類型是否被現在的用戶代理支援 — 意即可否成功的為該 MIME 類型建立 SourceBuffer 物件。

範例

以下簡單的範例儘快的載入一個個影片塊 (chunk) 且儘快的播放。這個範例是由 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);
}

function sourceOpen (_) {
  //console.log(this.readyState); // open
  var mediaSource = this;
  var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
  fetchAB(assetURL, function (buf) {
    sourceBuffer.addEventListener('updateend', function (_) {
      mediaSource.endOfStream();
      video.play();
      //console.log(mediaSource.readyState); // ended
    });
    sourceBuffer.appendBuffer(buf);
  });
};

function fetchAB (url, cb) {
  console.log(url);
  var xhr = new XMLHttpRequest;
  xhr.open('get', url);
  xhr.responseType = 'arraybuffer';
  xhr.onload = function () {
    cb(xhr.response);
  };
  xhr.send();
};

規格

規格 狀態 註釋
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 Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 23-webkit
31		 (Yes) 25.0 (25.0)[1]
42.0 (42.0)		 11[2] 15 8
Feature Android Edge Firefox Mobile (Gecko) Firefox OS (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 4.4.4 (Yes)

41.0

 41.0 11 30 No support

[1] 在切換 about:config preference media.mediasource.enabled 為 true 時可以使用。此外，支援只限於白名單內的網站，如：YouTube, Netflix, 以及其他熱門的串流網站。白名單已經被移除且 Media Source Extensions 在 42+ 對所有網站已預設為啟用。

[2] 只在 Windows 8+ 上有效。

相關資料

相關主題