De MediaSource API breidt het HTMLMediaElement
uit, zodat JavaScript mediastreams kan genereren om af te spelen. Door JavaScript toe te staan streams te genereren, wordt een verscheidenheid aan gebruiksscenario's mogelijk gemaakt, zoals adaptieve streaming en tijdverschuivende livestreams.
Hier is een korte demo en voorbeeldgebruik van de 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);
In het voorbeeld wordt een .webm-video in vijf delen gesplitst met behulp van de bestands-API's. De hele film wordt vervolgens 'gestreamd' naar een <video>
-tag door elk deel aan het element toe te voegen met behulp van de MediaSource API.
Als u meer wilt weten over de API, raadpleegt u de specificatie .
Ondersteuning: Momenteel is de MediaSource API alleen beschikbaar in Chrome Dev Channel 17+ met de vlag --enable-media-source
ingesteld of ingeschakeld via about:flags
.