只要提供 src 網址，即可使用 HTML 音訊和視訊元素載入、解碼及播放媒體：
<video src='foo.webm'></video>
這在簡單用途上運作良好，但對於自適應串流等技術，Media Source Extensions API (MSE) 可提供更多控制選項。MSE 可讓您使用 JavaScript 建構音訊或影片片段串流。
您可以在 simpl.info/mse 試用 MSE：
以下程式碼取自該範例。
MediaSource 代表音訊或影片元素的媒體來源。一旦 MediaSource 物件已例項化，且其 open 事件已觸發，即可將 SourceBuffer 新增至其中。這些內容可當做媒體區段的緩衝區：
var mediaSource = new MediaSource();
video.src = window.URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', function() {
var sourceBuffer =
mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
// Get video segments and append them to sourceBuffer.
}
媒體區段會透過 appendBuffer() 將每個區段新增至 SourceBuffer，並「串流」至音訊或影片元素。在這個範例中，系統會從伺服器擷取影片，然後使用 File API 儲存：
reader.onload = function (e) {
sourceBuffer.appendBuffer(new Uint8Array(e.target.result));
if (i === NUM_CHUNKS - 1) {
mediaSource.endOfStream();
} else {
if (video.paused) {
// start playing after first chunk is appended
video.play();
}
readChunk(++i);
}
};
設定播放順序
Chrome 50 為 SourceBuffer mode 屬性新增額外支援功能，讓您可以指定媒體區段以附加的順序連續播放，無論媒體區段最初是否有不連續的時間戳記。
請使用 mode 屬性指定媒體區段的播放順序。該事件具有以下兩個值之一：
- 片段：每個片段的時間戳記 (可能已由
timestampOffset修改) 會決定播放順序，無論片段附加的順序為何。 - 序列：媒體時間軸中緩衝的片段順序，取決於片段附加至
SourceBuffer的順序。
如果媒體片段在附加至 SourceBuffer 時，含有從位元組串流資料剖析而來的時間戳記，SourceBuffer 的 mode 屬性就會設為 segments。否則 mode 會設為「sequence」。請注意，時間戳記不是選用項目：大多數串流類型「必須」提供時間戳記，其他類型則「不能」提供時間戳記：內嵌時間戳記是包含內嵌時間戳記的串流類型的固有屬性。
您可以選擇是否設定 mode 屬性。對於不含時間戳記的串流 (audio/mpeg 和 audio/aac)，mode 只能從 segments 變更為 sequence：如果您嘗試將 mode 從 sequence 變更為 segments，系統會擲回錯誤。對於含有時間戳記的串流，您可以切換片段和序列，但實際上這可能會產生不理想、難以理解或難以預測的行為。
對於所有串流類型，您可以將值從「片段」變更為「序列」。也就是說，系統會依附加的順序播放片段，並相應產生新的時間戳記：
sourceBuffer.mode = 'sequence';
能將 mode 值設為 sequence，確保無論媒體片段的時間戳記不連續播放，還是附加不連續片段，都可確保媒體連續播放。如果有正確的串流中繼資料，應用程式可以使用 timestampOffset polyfill，確保持續播放，但序列模式可簡化程序，並減少發生錯誤的可能性。
MSE 應用程式和示範
這些範例會顯示 MSE 的運作情形，但不會操控 SourceBuffer.mode：
- 媒體來源 API
- Shaka Player：使用 MSE 搭配 Shaka JavaScript 程式庫導入 DASH 的影片播放器示範影片
瀏覽器支援
- 預設為 Chrome 50 以上版本
- 如要瞭解 Firefox 的相關資訊，請參閱 MDN