Media Source API - Zorg automatisch voor een naadloze weergave van mediasegmenten in de toevoegvolgorde

Sam Dutton

Met de HTML-audio- en video-elementen kunt u media laden, decoderen en afspelen door simpelweg een src-URL op te geven:

    <video src='foo.webm'></video>

Dat werkt goed in eenvoudige use cases, maar voor technieken zoals adaptieve streaming biedt de Media Source Extensions API (MSE) meer controle. Met MSE kunnen streams in JavaScript worden gebouwd op basis van audio- of videosegmenten.

U kunt MSE uitproberen op simpl.info/mse :

Schermafbeelding van video afgespeeld met behulp van de MSE API.

De onderstaande code komt uit dat voorbeeld.

Een MediaSource vertegenwoordigt een mediabron voor een audio- of video-element. Zodra een MediaSource -object is geïnstantieerd en de open -event is geactiveerd, kunnen er SourceBuffer aan worden toegevoegd. Deze fungeren als buffers voor mediasegmenten:

var mediaSource = new MediaSource();
video.src = window.URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', function() {
    var sourceBuffer =
        mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
    // Get video segments and append them to sourceBuffer.
}

Mediasegmenten worden 'gestreamd' naar een audio- of video-element door elk segment toe te voegen aan een SourceBuffer met appendBuffer() . In dit voorbeeld wordt video van de server opgehaald en vervolgens opgeslagen met behulp van de File API's:

reader.onload = function (e) {
    sourceBuffer.appendBuffer(new Uint8Array(e.target.result));
    if (i === NUM_CHUNKS - 1) {
    mediaSource.endOfStream();
    } else {
    if (video.paused) {
        // start playing after first chunk is appended
        video.play();
    }
    readChunk(++i);
    }
};

Afspeelvolgorde instellen

Chrome 50 biedt extra ondersteuning voor het kenmerk SourceBuffer mode , waarmee u kunt opgeven dat mediasegmenten doorlopend worden afgespeeld in de volgorde waarin ze zijn toegevoegd, ongeacht of de mediasegmenten oorspronkelijk discontinue tijdstempels hadden.

Gebruik het mode -kenmerk om de afspeelvolgorde voor mediasegmenten te specificeren. Het heeft een van de twee volgende waarden:

  • segmenten : Het tijdstempel van elk segment (dat mogelijk is gewijzigd door timestampOffset ) bepaalt de afspeelvolgorde, ongeacht de volgorde waarin segmenten worden toegevoegd.
  • sequentie : De volgorde van segmenten die in de mediatijdlijn worden gebufferd, wordt bepaald door de volgorde waarin segmenten aan de SourceBuffer worden toegevoegd.

Als de mediasegmenten tijdstempels hebben die zijn geparseerd uit bytestreamgegevens wanneer ze worden toegevoegd aan de SourceBuffer , wordt de eigenschap mode van de SourceBuffer ingesteld op segments . Anders wordt mode ingesteld op sequence . Houd er rekening mee dat tijdstempels niet optioneel zijn: ze moeten aanwezig zijn voor de meeste streamtypen en kunnen niet aanwezig zijn voor andere: inband-tijdstempels zijn inherent aan streamtypen die ze bevatten.

Het instellen van het mode -kenmerk is optioneel. Voor streams zonder tijdstempels (audio/mpeg en audio/aac) kan mode alleen worden gewijzigd van segmenten naar sequence : er wordt een foutmelding gegenereerd als u probeert mode te wijzigen van sequence naar segmenten . Voor streams met tijdstempels is het mogelijk om te schakelen tussen segmenten en sequence , hoewel dit in de praktijk waarschijnlijk ongewenst, moeilijk te begrijpen of moeilijk te voorspellen gedrag zou opleveren.

Voor alle streamtypen kunt u de waarde wijzigen van segmenten naar sequentie . Dit betekent dat segmenten worden afgespeeld in de volgorde waarin ze zijn toegevoegd en dat er op basis daarvan nieuwe tijdstempels worden gegenereerd:

sourceBuffer.mode = 'sequence';

Door de mode op sequentie in te stellen, wordt continue mediaweergave gegarandeerd, ongeacht of de tijdstempels van de mediasegmenten discontinu waren – bijvoorbeeld als er problemen waren met video- muxing , of als (om welke reden dan ook) discontinue segmenten worden toegevoegd. Een app kan polyfillen met timestampOffset om continue weergave te garanderen, mits de juiste streammetadata beschikbaar is. De sequentiemodus maakt het proces echter eenvoudiger en minder foutgevoelig.

MSE-apps en demo's

Deze afbeeldingen laten MSE in actie zien, maar dan zonder SourceBuffer.mode -manipulatie:

Browserondersteuning

  • Standaard Chrome 50 en hoger
  • Voor Firefox, zie MDN voor details

Specificatie

API-informatie