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 は、--enable-media-source
フラグを設定するか、about:flags
で有効にした Chrome Dev チャンネル 17 以降でのみ使用できます。