Nozioni di base sullo streaming di contenuti multimediali

Derek Herman

Jaroslav Polakovič

In questo articolo, scoprirai il concetto più avanzato di media di streaming e alla fine dovrebbe avere una buona comprensione dei vari casi d'uso, protocolli ed estensioni dei flussi di dati. Iniziamo con un spiegazione di cosa sia effettivamente lo streaming.

Lo streaming multimediale è un modo per distribuire e riprodurre contenuti multimediali pezzo. Invece di caricare un singolo file, il che può essere lento se non è ottimizzato per rete, il player legge un file manifest che descrive in che modo l'elemento multimediale target suddivisi in singoli blocchi di dati. I blocchi di contenuti multimediali vengono poi uniti dinamicamente in fase di runtime, probabilmente a bitrate diversi, che imparerai più tardi.

Tieni presente che per fornire streaming sul tuo sito web al server Deve supportare l'intestazione della richiesta HTTP Range. Scopri di più sul Accept-Ranges intestazione in The <video> e <source> .

Casi d'uso per i flussi di dati

La produzione di blocchi multimediali e i manifest necessari che descrivono il flusso non sono perfettamente chiara, ma lo streaming apre alcuni casi d'uso interessanti che non è possibile farlo puntando un elemento <video> in un insieme di file di origine statici. Scoprirai di più su come Aggiungere contenuti multimediali a una pagina web in una sezione successiva. Innanzitutto, devi sapere alcuni casi d'uso dello streaming multimediale se si desidera andare oltre il semplice caricando più file nell'elemento <video>.

• Lo streaming adattivo è quello in cui i blocchi multimediali vengono codificati in diverse velocità in bit e il frammento multimediale della massima qualità che si adatta alla velocità in bit del client la larghezza di banda attualmente disponibile viene restituita al media player.
• Per trasmissione dal vivo i blocchi multimediali vengono codificati e resi disponibili in in tempo reale.
• L'inserimento di contenuti multimediali è il punto in cui vengono inseriti altri contenuti multimediali, come le pubblicità. uno stream senza che il player debba cambiare l'origine dei contenuti multimediali.

Protocolli di streaming

I due protocolli per lo streaming più comunemente utilizzati sul web sono Dynamic Streaming adattivo su HTTP (DASH) e HTTP Live Streaming (HLS). I player che supportano questi protocolli recuperano il file manifest generato, capire quali blocchi di contenuti multimediali richiedere e poi combinarli nei un'esperienza multimediale.

Utilizzo di <video> per riprodurre uno stream

Molti browser non riprodurranno lo stream in modo nativo. Sebbene ci siano alcuni supporto nativo per la riproduzione HLS; i browser in genere non supportano il formato DASH nativo la riproduzione in streaming. Ciò significa che spesso non basta puntare il <source> nell'elemento <video> a un file manifest.

<video controls>
  <source src="manifest.mpd" type="application/dash+xml">
</video>

Attenzione : si tratta di un codice HTML valido, ma in realtà non funziona. I browser non supportano in modo nativo la riproduzione del manifest DASH aggiunta alla proprietà src.

Quello che può sembrare un deficit è in realtà una forza camuffata. Gli stream sono molto potenti e le applicazioni che utilizzano flussi hanno esigenze diverse.

I file manifest in genere descrivono molte varianti di un singolo contenuto multimediale. Pensa in modo diverso velocità in bit, diverse tracce audio e persino gli stessi contenuti multimediali codificati in formati.

Per alcune applicazioni conviene mantenere nel buffer una quantità maggiore di video, altri potrebbero voler precaricare i primi secondi di un video da un dell'episodio, mentre altri preferiscono implementare la propria logica per lo streaming adattivo. Qui è dove vorresti avere una sorta di funzionalità browser integrata per generare flussi multimediali per la riproduzione.

Media Source Extensions

Per fortuna, il W3C ha definito una sorta di definizione chiamata Media Source Extensions (MSE). che consenta a JavaScript di generare i nostri stream multimediali. In breve, la soluzione MSE consente agli sviluppatori di collegare un oggetto MediaSource a un elemento <video> e di avere riproduce i dati multimediali che vengono inseriti nei buffer collegati MediaSource istanza.

Esempio di base

const videoEl = document.querySelector('video');
const mediaSource = new MediaSource();

video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener(
  'sourceopen',
  () => {
    const mimeString = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
    const buffer = mediaSource.addSourceBuffer(mimeString);

    buffer.appendBuffer( /* Video data as `ArrayBuffer` object. */ )
  }
);

L'esempio semplificato riportato sopra illustra alcuni aspetti:

• Per quanto riguarda <video>, riceve dati multimediali da un URL.
• L'URL generato è solo un puntatore a un'istanza MediaSource.
• L'istanza MediaSource crea una o più istanze SourceBuffer.
• Quindi aggiungiamo semplicemente dati multimediali binari nel buffer, ad esempio utilizzando fetch.

Sebbene questi concetti di base siano semplici ed è sicuramente possibile scrivere un Video player compatibile con DASH e HLS da zero; la maggior parte delle persone solitamente ne sceglie uno delle soluzioni open source mature già esistenti, come Shaka Player, JW Player o Video.js, per citarne alcuni.

Tuttavia, abbiamo creato una PWA multimediale chiamata Kino demo che dimostra come sviluppare un sito web base per lo streaming di contenuti multimediali che fornisca la riproduzione di contenuti multimediali offline usando solo il semplice elemento <video>. Ci sono piani della nostra roadmap a supporto dei quadri normativi e della gestione dei diritti digitali, tra le altre le funzionalità di machine learning. Pertanto, controlla di tanto in tanto gli aggiornamenti o richiedi una funzionalità. Scopri di più nell'articolo PWA con streaming offline.

Formato chunk di contenuti multimediali

Per molto tempo, DASH e HLS hanno richiesto che i blocchi multimediali fossero codificati in diversi formati. Nel 2016, tuttavia, il supporto di file MP4 frammentati (fMP4) standard è stato aggiunto a HLS, un formato supportato anche da DASH.

Sono supportati i blocchi video che utilizzano il container fMP4 e il codec H.264 secondo entrambi i protocolli e giocabile dalla stragrande maggioranza dei giocatori. Ciò consente ai produttori di contenuti di codificare i propri video una sola volta, il che a sua volta consente di risparmiare tempo su disco e spazio esterno.

Per ottenere una qualità migliore e dimensioni inferiori dei file, ti consigliamo di scegliere codificano diversi insiemi di blocchi multimediali usando formati più efficienti come VP9, anche se prima di andare avanti dovrai imparare a Prepara i file multimediali per il web. Questo è tutto.