Gli elementi audio e video HTML ti consentono di caricare, decodificare e riprodurre contenuti multimediali semplicemente fornendo un URL di origine:
<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 di creare stream in JavaScript a partire da segmenti di audio o video.
Puoi provare MSE all'indirizzo simpl.info/mse:
Il codice riportato di seguito è tratto da questo esempio.
Un MediaSource rappresenta un'origine di contenuti multimediali per un elemento audio o video. Una volta creato un oggetto MediaSource e attivato il relativo evento open, è possibile aggiungere SourceBuffer. Questi elementi 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" a 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 SourceBuffer mode, consentendo di specificare che i segmenti multimediali vengano riprodotti in modo continuo, nell'ordine in cui sono stati aggiunti, indipendentemente dal fatto che i segmenti multimediali avessero inizialmente timestamp discontinui.
Utilizza l'attributo mode per specificare l'ordine di riproduzione dei segmenti multimediali. Può avere uno dei due valori:
- segments: il timestamp di ogni segmento (che potrebbe essere stato modificato da
timestampOffset) determina l'ordine di riproduzione, indipendentemente dall'ordine in cui i segmenti vengono aggiunti. - Sequenza: l'ordine dei segmenti inseriti nel buffer nella sequenza temporale multimediale è determinato dall'ordine con cui i segmenti vengono aggiunti a
SourceBuffer.
Se i segmenti multimediali hanno timestamp analizzati dai dati dello 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 in-band sono innati 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: verrà generato un errore se cerchi di modificare mode da sequenza a segmenti. Per gli stream con timestamp, è possibile passare da segmenti a sequenza, anche se in pratica questo potrebbe produrre un comportamento indesiderato, difficile da comprendere o 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 verranno generati nuovi timestamp di conseguenza:
sourceBuffer.mode = 'sequence';
La possibilità di impostare il valore mode su sequence garantisce la riproduzione continua dei contenuti multimediali, indipendentemente dal fatto che i timestamp dei segmenti multimediali siano discontinui, ad esempio se si sono verificati problemi con il muxing del video o se (per qualsiasi motivo) vengono aggiunti segmenti discontinui. È possibile che un'app esegui il polyfill con timestampOffset per garantire la riproduzione continua, se sono disponibili metadati dello stream corretti, ma la modalità sequence semplifica la procedura e riduce la possibilità di errori.
App e demo MSE
Questi mostrano MSE in azione, ma senza manipolazione di SourceBuffer.mode:
- API Media Source
- Shaka Player: demo di un video player che utilizza MSE per implementare DASH con la libreria JavaScript Shaka
Supporto browser
- Chrome 50 e versioni successive per impostazione predefinita
- Per Firefox, vedi MDN per i dettagli