Stream video met behulp van de MediaSource API

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

DEMO

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 .