MediaSource

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

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

EventTarget MediaSource

建構子 (Constructor)

MediaSource()

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

屬性 (Properties)

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

取得或設置現在正被表示的媒體的時間長度。

事件處理函數 (Event handlers)

MediaSource.onsourceclose

sourceclose 事件的事件處理函數。

MediaSource.onsourceended

sourceended 事件的事件處理函數。

MediaSource.onsourceopen

sourceopen 事件的事件處理函數。

方法 (Methods)

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

MediaSource.addSourceBuffer()

依據指定的 MIME 類型建立一個新的 SourceBuffer 且將其加入 MediaSourceSourceBuffers 串列。

MediaSource.clearLiveSeekableRange()

清除先前藉由呼叫 setLiveSeekableRange() 所設定的可尋找範圍。

MediaSource.endOfStream()

示意串流的結束。

MediaSource.removeSourceBuffer()

從與此 MediaSource 物件關聯的 SourceBuffers 串列移除指定的 SourceBuffer

MediaSource.setLiveSeekableRange()

設定使用者可以在媒體元素中的可尋找範圍。

靜態方法 (Static methods)

MediaSource.isTypeSupported()

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

範例

以下簡單的範例儘快的載入一個個影片塊 (chunk) 且儘快的播放。這個範例是由 Nick Desaulniers 所撰寫且可以在此實際觀看(你也可以下載原始碼以更進一步研究)

js
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();
}

規格

Specification
Media Source Extensions™
# mediasource

相容性表格

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
MediaSource
MediaSource() constructor
activeSourceBuffers
addSourceBuffer
canConstructInDedicatedWorker static property
clearLiveSeekableRange
duration
endOfStream
handle
isTypeSupported() static method
readyState
removeSourceBuffer
setLiveSeekableRange
sourceBuffers
sourceclose event
sourceended event
sourceopen event
Available in workers
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

相關資料