API Media Source: assicura automaticamente una riproduzione senza interruzioni dei segmenti multimediali in ordine di aggiunta

[Nome di persona]

Gli elementi audio e video HTML consentono di caricare, decodificare e riprodurre contenuti multimediali semplicemente fornendo un URL src:

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

Questo approccio funziona bene in casi d'uso semplici, ma per tecniche come lo streaming adattivo l'API Media Source Extensions (MSE) offre un maggiore controllo. MSE consente la creazione di stream in JavaScript da segmenti di audio o video.

Puoi provare la MSE all'indirizzo simpl.info/mse:

Screenshot del video riprodotto con l&#39;API MSE.

Il codice riportato di seguito deriva da quell'esempio.

Un elemento MediaSource rappresenta una fonte di contenuti multimediali per un elemento audio o video. Una volta creata l'istanza di un oggetto MediaSource e attivato il relativo evento open, è possibile aggiungere SourceBuffer. Essi fungono da buffer per i segmenti multimediali:

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.
}

I segmenti multimediali vengono "trasmessi in streaming" in un elemento audio o video aggiungendo ogni segmento a un SourceBuffer con appendBuffer(). In questo esempio, il video viene recuperato dal server e poi archiviato utilizzando le API File:

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

Impostazione dell'ordine di riproduzione

Chrome 50 aggiunge ulteriore supporto all'attributo mode SourceBuffer, consentendoti di specificare che i segmenti multimediali vengano riprodotti continuamente nell'ordine in cui sono stati aggiunti, a prescindere dal fatto che inizialmente i segmenti multimediali abbiano timestamp discontinui.

Utilizza l'attributo mode per specificare l'ordine di riproduzione per i segmenti multimediali. Può avere uno dei due valori seguenti:

  • Segmenti: il timestamp di ciascun segmento (che potrebbe essere stato modificato da timestampOffset) determina l'ordine di riproduzione, indipendentemente dall'ordine in cui vengono aggiunti i segmenti.
  • Sequenza: l'ordine dei segmenti inseriti nel buffer nella sequenza temporale dei contenuti multimediali è determinato dall'ordine in cui i segmenti vengono aggiunti al SourceBuffer.

Se i segmenti multimediali hanno timestamp analizzati dai dati di stream di byte quando vengono aggiunti a SourceBuffer, la proprietà mode di SourceBuffer verrà impostata su segmenti. In caso contrario, mode verrà impostato su Sequenza. Tieni presente che i timestamp non sono facoltativi: devono essere presenti per la maggior parte dei tipi di stream e non possono essere presenti per altri: i timestamp inband sono insiti nei tipi di stream che li contengono.

L'impostazione dell'attributo mode è facoltativa. Per gli stream che non contengono timestamp (audio/mpeg e audio/aac), mode può essere modificato solo da segmenti a sequenza: viene generato un errore se provi a cambiare mode da sequenza a segmenti. Per gli stream con timestamp, è possibile passare dai segmenti alla sequenza e viceversa, anche se in pratica ciò produrrà probabilmente un comportamento indesiderato, difficile da comprendere o difficile da prevedere.

Per tutti i tipi di stream, puoi modificare il valore da segmenti a sequenza. Ciò significa che i segmenti verranno riprodotti nell'ordine in cui sono stati aggiunti e i nuovi timestamp verranno generati di conseguenza:

sourceBuffer.mode = 'sequence';

L'impostazione del valore mode su sequenza assicura una riproduzione multimediale continua, indipendentemente dal fatto che i timestamp dei segmenti multimediali fossero discontinui, ad esempio in caso di problemi con il mux del video o se (per qualsiasi motivo) vengono aggiunti segmenti discontinui. Un'app può eseguire il polyfill con timestampOffset per garantire la riproduzione continua, se sono disponibili metadati dello stream corretti, ma la modalità sequenza rende il processo più semplice e meno soggetto a errori.

App e demo MSE

Questi esempi mostrano MSE in azione, ma senza manipolazione SourceBuffer.mode:

Supporto del browser

  • Chrome 50 e versioni successive per impostazione predefinita
  • Per Firefox, vedi MDN per i dettagli

Specifiche

Informazioni sull'API