使用 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);

演示

该示例使用 File API 将 .webm 视频拆分为 5 个分块。然后，使用 MediaSource API 将每个分块附加到该元素，将整部电影“流式传输”到 <video> 标记。

如果您有兴趣详细了解该 API，请参阅规范。

支持：目前，MediaSource API 仅适用于 Chrome 开发者版 17 及更高版本，且必须设置 --enable-media-source 标志或通过 about:flags 启用。