HTML 音訊和影片元素可讓您只提供 src 網址,即可載入、解碼並播放媒體:
<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
修改) 都會決定播放順序。 - sequence:在媒體時間軸中緩衝處理的區段順序,取決於區段附加至
SourceBuffer
的順序。
如果媒體區段的時間戳記附加至 SourceBuffer
時,是從位元組串流資料剖析而來,SourceBuffer
的 mode
屬性會設為「區隔」。否則 mode
會設為 sequence請注意,你不一定要提供時間戳記;大多數串流類型「必須」有這些時間戳記,其他類型則不可使用時間戳記:內嵌時間戳記通常不會與含有這些時間戳記的串流類型相輔相成。
設定 mode
屬性為選用屬性。如果串流不含時間戳記 (音訊/mpeg 和音訊/aac),mode
只能從 segments 變更為 sequence:如果您嘗試將 mode
從 sequence 變更為 segments,系統會發生錯誤。如果串流含有時間戳記,則可以切換使用「片段」和「序列」,不過在實務上,這麼做可能會產生不想要、難以理解或難以預測的行為。
無論串流類型為何,你都可以將值從區隔變更為序列。這表示系統會依照片段附加的順序播放,然後產生相應的新時間戳記:
sourceBuffer.mode = 'sequence';
將 mode
值設為 sequence如果應用程式有正確的串流中繼資料,應用程式可以使用 timestampOffset
建立 polyfill,確保播放不中斷;但如果使用序列模式,作業流程會比較簡單,不容易出錯。
MSE 應用程式和試用版
雖然這些程式碼顯示 MSE 實際運作,但完全沒有進行 SourceBuffer.mode
操作:
- Media Source API
- Shaka Player:使用 MSE 搭配 Shaka JavaScript 程式庫導入 DASH 的影片播放器示範
瀏覽器支援
- 預設使用 Chrome 50 以上版本
- 如果是 Firefox,請參閱 MDN 以瞭解詳情