Media Source API - 自動確保依附加順序順暢播放媒體區段

HTML 音訊和影片元素可讓您只提供 src 網址,即可載入、解碼並播放媒體:

    <video src='foo.webm'></video>

這在簡單的用途中也能正常運作,但針對自動調整串流等技巧,Media Source Extensions API (MSE) 提供更多控制項。MSE 可讓以 JavaScript 為單位的音訊或視訊片段建立串流。

您可以前往 simpl.info/mse 試用 MSE:

使用 MSE API 播放影片的螢幕截圖。

下方程式碼即為該範例。

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 時,是從位元組串流資料剖析而來,SourceBuffermode 屬性會設為「區隔」。否則 mode 會設為 sequence請注意,你不一定要提供時間戳記;大多數串流類型「必須」有這些時間戳記,其他類型則不可使用時間戳記:內嵌時間戳記通常不會與含有這些時間戳記的串流類型相輔相成。

設定 mode 屬性為選用屬性。如果串流不含時間戳記 (音訊/mpeg 和音訊/aac),mode 只能從 segments 變更為 sequence:如果您嘗試將 modesequence 變更為 segments,系統會發生錯誤。如果串流含有時間戳記,則可以切換使用「片段」和「序列」,不過在實務上,這麼做可能會產生不想要、難以理解或難以預測的行為。

無論串流類型為何,你都可以將值從區隔變更為序列。這表示系統會依照片段附加的順序播放,然後產生相應的新時間戳記:

sourceBuffer.mode = 'sequence';

mode 值設為 sequence如果應用程式有正確的串流中繼資料,應用程式可以使用 timestampOffset 建立 polyfill,確保播放不中斷;但如果使用序列模式,作業流程會比較簡單,不容易出錯。

MSE 應用程式和試用版

雖然這些程式碼顯示 MSE 實際運作,但完全沒有進行 SourceBuffer.mode 操作:

瀏覽器支援

  • 預設使用 Chrome 50 以上版本
  • 如果是 Firefox,請參閱 MDN 以瞭解詳情

規格

API 資訊