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, eenvoudigweg door een src-URL op te geven:

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

Dat werkt in eenvoudige gebruikssituaties goed, maar voor technieken als adaptive 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 :

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 gebeurtenis ervan 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 naar een audio- of video-element 'gestreamd' door elk segment toe te voegen aan een SourceBuffer met appendBuffer() . In dit voorbeeld wordt video opgehaald van de server 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 voegt extra ondersteuning toe aan het SourceBuffer mode , waardoor u kunt opgeven dat mediasegmenten continu worden afgespeeld, in de volgorde waarin ze zijn toegevoegd, ongeacht of de mediasegmenten aanvankelijk onderbroken tijdstempels hadden.

Gebruik het mode -attribuut om de afspeelvolgorde voor mediasegmenten op te geven. Het heeft een van de twee waarden:

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

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

Het instellen van het mode -attribuut is optioneel. Voor streams die geen tijdstempels bevatten (audio/mpeg en audio/aac) kan mode alleen worden gewijzigd van segmenten naar reeks : er wordt een fout gegenereerd als u probeert mode van reeks naar segmenten te wijzigen. Voor streams met tijdstempels is het mogelijk om te schakelen tussen segmenten en sequenties , hoewel dat in de praktijk waarschijnlijk gedrag zou opleveren dat ongewenst, moeilijk te begrijpen of moeilijk te voorspellen was.

Voor alle streamtypen kunt u de waarde wijzigen van segmenten in sequence . Dit betekent dat segmenten worden afgespeeld in de volgorde waarin ze zijn toegevoegd, en dat er dienovereenkomstig nieuwe tijdstempels worden gegenereerd:

sourceBuffer.mode = 'sequence';

Door de mode op volgorde in te stellen, wordt het continu afspelen van media gegarandeerd, ongeacht of de tijdstempels van de mediasegmenten discontinu waren, bijvoorbeeld als er problemen waren met het muxen van video's, of als (om welke reden dan ook) discontinue segmenten worden toegevoegd. Het is mogelijk dat een app polyfill gebruikt met timestampOffset om continu afspelen te garanderen, als de juiste stream-metagegevens beschikbaar zijn, maar de sequentiemodus maakt het proces eenvoudiger en minder foutgevoelig.

MSE-apps en demo's

Deze tonen MSE in actie, maar zonder manipulatie SourceBuffer.mode :

• Mediabron-API
• Shaka Player : demo van een videospeler die MSE gebruikt om DASH te implementeren met de Shaka JavaScript-bibliotheek

Browser-ondersteuning

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

Specificatie

• Mediabronextensies appendMode() -methode

API-informatie

• MDN: SourceBuffer.mode

Sam Dutton

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

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

Dat werkt in eenvoudige gebruikssituaties goed, maar voor technieken als adaptive 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 :

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 gebeurtenis ervan 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 naar een audio- of video-element 'gestreamd' door elk segment toe te voegen aan een SourceBuffer met appendBuffer() . In dit voorbeeld wordt video opgehaald van de server 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 voegt extra ondersteuning toe aan het SourceBuffer mode , waardoor u kunt opgeven dat mediasegmenten continu worden afgespeeld, in de volgorde waarin ze zijn toegevoegd, ongeacht of de mediasegmenten aanvankelijk onderbroken tijdstempels hadden.

Gebruik het mode -attribuut om de afspeelvolgorde voor mediasegmenten op te geven. Het heeft een van de twee waarden:

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

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

Het instellen van het mode -attribuut is optioneel. Voor streams die geen tijdstempels bevatten (audio/mpeg en audio/aac) kan mode alleen worden gewijzigd van segmenten naar reeks : er wordt een fout gegenereerd als u probeert mode te wijzigen van reeks naar segmenten . Voor streams met tijdstempels is het mogelijk om te schakelen tussen segmenten en sequenties , hoewel dat in de praktijk waarschijnlijk gedrag zou opleveren dat ongewenst, moeilijk te begrijpen of moeilijk te voorspellen was.

Voor alle streamtypen kunt u de waarde wijzigen van segmenten in sequence . Dit betekent dat segmenten worden afgespeeld in de volgorde waarin ze zijn toegevoegd, en dat er dienovereenkomstig nieuwe tijdstempels worden gegenereerd:

sourceBuffer.mode = 'sequence';

Door de mode op volgorde in te stellen, wordt het continu afspelen van media gegarandeerd, ongeacht of de tijdstempels van de mediasegmenten discontinu waren, bijvoorbeeld als er problemen waren met het muxen van video's, of als (om welke reden dan ook) discontinue segmenten worden toegevoegd. Het is mogelijk dat een app polyfill gebruikt met timestampOffset om continu afspelen te garanderen, als de juiste stream-metagegevens beschikbaar zijn, maar de sequentiemodus maakt het proces eenvoudiger en minder foutgevoelig.

MSE-apps en demo's

Deze tonen MSE in actie, maar zonder manipulatie SourceBuffer.mode :

• Mediabron-API
• Shaka Player : demo van een videospeler die MSE gebruikt om DASH te implementeren met de Shaka JavaScript-bibliotheek

Browser-ondersteuning

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

Specificatie

• Mediabronextensies appendMode() -methode

API-informatie

• MDN: SourceBuffer.mode

Sam Dutton

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

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

Dat werkt in eenvoudige gebruikssituaties goed, maar voor technieken als adaptive 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 :

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 gebeurtenis ervan 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 naar een audio- of video-element 'gestreamd' door elk segment toe te voegen aan een SourceBuffer met appendBuffer() . In dit voorbeeld wordt video opgehaald van de server 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 voegt extra ondersteuning toe aan het SourceBuffer mode , waardoor u kunt opgeven dat mediasegmenten continu worden afgespeeld, in de volgorde waarin ze zijn toegevoegd, ongeacht of de mediasegmenten aanvankelijk onderbroken tijdstempels hadden.

Gebruik het mode -attribuut om de afspeelvolgorde voor mediasegmenten op te geven. Het heeft een van de twee waarden:

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

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

Het instellen van het mode -attribuut is optioneel. Voor streams die geen tijdstempels bevatten (audio/mpeg en audio/aac) kan mode alleen worden gewijzigd van segmenten naar reeks : er wordt een fout gegenereerd als u probeert mode te wijzigen van reeks naar segmenten . Voor streams met tijdstempels is het mogelijk om te schakelen tussen segmenten en sequenties , hoewel dat in de praktijk waarschijnlijk gedrag zou opleveren dat ongewenst, moeilijk te begrijpen of moeilijk te voorspellen was.

Voor alle streamtypen kunt u de waarde wijzigen van segmenten in sequence . Dit betekent dat segmenten worden afgespeeld in de volgorde waarin ze zijn toegevoegd, en dat er dienovereenkomstig nieuwe tijdstempels worden gegenereerd:

sourceBuffer.mode = 'sequence';

Door de mode op volgorde in te stellen, wordt het continu afspelen van media gegarandeerd, ongeacht of de tijdstempels van de mediasegmenten discontinu waren, bijvoorbeeld als er problemen waren met het muxen van video's, of als (om welke reden dan ook) discontinue segmenten worden toegevoegd. Het is mogelijk dat een app polyfill gebruikt met timestampOffset om continu afspelen te garanderen, als de juiste stream-metagegevens beschikbaar zijn, maar de sequentiemodus maakt het proces eenvoudiger en minder foutgevoelig.

MSE-apps en demo's

Deze tonen MSE in actie, maar zonder manipulatie SourceBuffer.mode :

• Mediabron-API
• Shaka Player : demo van een videospeler die MSE gebruikt om DASH te implementeren met de Shaka JavaScript-bibliotheek

Browser-ondersteuning

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

Specificatie

• Mediabronextensies appendMode() -methode

API-informatie

• MDN: SourceBuffer.mode

Sam Dutton

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

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

Dat werkt in eenvoudige gebruikssituaties goed, maar voor technieken als adaptive 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 :

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 gebeurtenis ervan 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 naar een audio- of video-element 'gestreamd' door elk segment toe te voegen aan een SourceBuffer met appendBuffer() . In dit voorbeeld wordt video opgehaald van de server 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 voegt extra ondersteuning toe aan het SourceBuffer mode , waardoor u kunt opgeven dat mediasegmenten continu worden afgespeeld, in de volgorde waarin ze zijn toegevoegd, ongeacht of de mediasegmenten aanvankelijk onderbroken tijdstempels hadden.

Gebruik het mode -attribuut om de afspeelvolgorde voor mediasegmenten op te geven. Het heeft een van de twee waarden:

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

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

Het instellen van het mode -attribuut is optioneel. Voor streams die geen tijdstempels bevatten (audio/mpeg en audio/aac) kan mode alleen worden gewijzigd van segmenten naar reeks : er wordt een fout gegenereerd als u probeert mode te wijzigen van reeks naar segmenten . Voor streams met tijdstempels is het mogelijk om te schakelen tussen segmenten en sequenties , hoewel dat in de praktijk waarschijnlijk gedrag zou opleveren dat ongewenst, moeilijk te begrijpen of moeilijk te voorspellen was.

Voor alle streamtypen kunt u de waarde wijzigen van segmenten in sequence . Dit betekent dat segmenten worden afgespeeld in de volgorde waarin ze zijn toegevoegd, en dat er dienovereenkomstig nieuwe tijdstempels worden gegenereerd:

sourceBuffer.mode = 'sequence';

Door de mode op volgorde in te stellen, wordt het continu afspelen van media gegarandeerd, ongeacht of de tijdstempels van de mediasegmenten discontinu waren, bijvoorbeeld als er problemen waren met het muxen van video's, of als (om welke reden dan ook) discontinue segmenten worden toegevoegd. Het is mogelijk dat een app polyfill gebruikt met timestampOffset om continu afspelen te garanderen, als de juiste stream-metagegevens beschikbaar zijn, maar de sequentiemodus maakt het proces eenvoudiger en minder foutgevoelig.

MSE-apps en demo's

Deze tonen MSE in actie, maar zonder manipulatie SourceBuffer.mode :

• Mediabron-API
• Shaka Player : demo van een videospeler die MSE gebruikt om DASH te implementeren met de Shaka JavaScript-bibliotheek

Browser-ondersteuning

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

Specificatie

• Mediabronextensies appendMode() -methode

API-informatie

• MDN: SourceBuffer.mode