MediaSource

Experimental

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

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

建構子 (Constructor)

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

屬性 (Properties)

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

事件處理函數 (Event handlers)

MediaSource.onsourceclose
sourceclose 事件的事件處理函數。
MediaSource.onsourceended
sourceended 事件的事件處理函數。
MediaSource.onsourceopen
sourceopen 事件的事件處理函數。

方法 (Methods)

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

MediaSource.addSourceBuffer() (en-US)
依據指定的 MIME 類型建立一個新的 SourceBuffer (en-US) 且將其加入 MediaSource 的 SourceBuffers 串列。
MediaSource.clearLiveSeekableRange() (en-US)
清除先前藉由呼叫 setLiveSeekableRange() 所設定的可尋找範圍。
MediaSource.endOfStream() (en-US)
示意串流的結束。
MediaSource.removeSourceBuffer() (en-US)
從與此 MediaSource 物件關聯的 SourceBuffers 串列移除指定的 SourceBuffer (en-US)
MediaSource.setLiveSeekableRange() (en-US)
設定使用者可以在媒體元素中的可尋找範圍。

靜態方法 (Static methods)

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

範例

以下簡單的範例儘快的載入一個個影片塊 (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.

相容性表格

BCD tables only load in the browser

相關資料