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
启用。