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

相關資料