MediaSource

Limited availability

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

io error: No such file or directory (os error 2) (/home/runner/work/yari/yari/mdn/translated-content/files/zh-tw/web/api/media_source_extensions_api/index.md)

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

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

相容性表格

BCD tables only load in the browser

相關資料