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 以上版本,並已透過 about:flags
設定或啟用 --enable-media-source
標記。