使用 MediaSource API 串流播放影片

MediaSource API 擴充 HTMLMediaElement，讓 JavaScript 產生媒體串流以供播放。允許 JavaScript 產生串流，可用於各種用途，例如自適應串流和時間移轉直播。

以下是 API 的快速示範和使用範例：

const NUM_CHUNKS = 5;

var video = document.querySelector('video');
video.src = video.webkitMediaSourceURL;

video.addEventListener('webkitsourceopen', function(e) {
    var chunkSize = Math.ceil(file.size / NUM_CHUNKS);

    // Slice the video into NUM_CHUNKS and append each to the media element.
    for (var i = 0; i < NUM_CHUNKS; ++i) {
    var startByte = chunkSize * i;

    // file is a video file.
    var chunk = file.slice(startByte, startByte + chunkSize);

    var reader = new FileReader();
    reader.onload = (function(idx) {
        return function(e) {
        video.webkitSourceAppend(new Uint8Array(e.target.result));
        logger.log('appending chunk:' + idx);
        if (idx == NUM_CHUNKS - 1) {
            video.webkitSourceEndOfStream(HTMLMediaElement.EOS_NO_ERROR);
        }
        };
    })(i);

    reader.readAsArrayBuffer(chunk);
    }
}, false);

DEMO

這個範例使用 File API 將 .webm 影片分割成 5 個片段。接著，使用 MediaSource API 將每個區塊附加至元素，然後將整部電影「串流」至 <video> 標記。

如要進一步瞭解 API，請參閱規格說明。

支援：目前，MediaSource API 僅適用於 Chrome 開發人員頻道 17 以上版本，且必須設定 --enable-media-source 旗標或透過 about:flags 啟用。