Grundlagen des Media-Streamings

Derek Herman

Jaroslav Polakovič

In diesem Artikel erfahren Sie mehr über das fortgeschrittenere Konzept des Medienstreamings. Am Ende sollten Sie ein gutes Verständnis der verschiedenen Streaminganwendungsfälle, ‑protokolle und ‑erweiterungen haben. Beginnen wir mit einer Erklärung, was Streaming eigentlich ist.

Beim Medienstreaming werden Medieninhalte nach und nach bereitgestellt und wiedergegeben. Anstatt eine einzelne Datei zu laden, was bei nicht für das Netzwerk optimierten Dateien langsam sein kann, liest der Player eine Manifestdatei, die beschreibt, wie die Zielmedien in einzelne Datenblöcke aufgeteilt werden. Die Medien-Chunks werden später zur Laufzeit dynamisch wieder zusammengefügt – wahrscheinlich mit unterschiedlichen Bitraten, über die du später mehr erfährst.

Damit Streaming auf deiner Website möglich ist, muss der Server den HTTP-Anfrageheader Range unterstützen. Weitere Informationen zum Accept-Ranges-Header findest du im Artikel Die Tags <video> und <source>.

Anwendungsfälle für Streaming

Die Erstellung von Medien-Chunks und der erforderlichen Manifeste, die den Stream beschreiben, ist nicht ganz einfach. Durch Streaming lassen sich jedoch einige interessante Anwendungsfälle realisieren, die nicht möglich sind, wenn ein <video>-Element nur auf eine Reihe statischer Quelldateien verweist. Wie Sie einer Webseite Medien hinzufügen, erfahren Sie weiter unten. Weitere Informationen Wenn Sie nicht nur mehrere Dateien in das <video>-Element laden möchten, sollten Sie sich zuerst mit einigen Anwendungsfällen für das Streaming von Multimedia vertraut machen.

• Beim Adaptiven Streaming werden Medienblöcke in mehreren Bitraten codiert. Der Medienblock mit der höchsten Qualität, der für die derzeit verfügbare Bandbreite des Clients passt, wird an den Mediaplayer zurückgegeben.
• Bei der Liveübertragung werden Medienblöcke codiert und in Echtzeit zur Verfügung gestellt.
• Beim Einschleusen von Medien werden andere Medien wie Anzeigen in einen Stream eingefügt, ohne dass der Player die Medienquelle ändern muss.

Streamingprotokolle

Die beiden am häufigsten verwendeten Streamingprotokolle im Web sind Dynamic Adaptive Streaming over HTTP (DASH) und HTTP Live Streaming (HLS). Player, die diese Protokolle unterstützen, rufen die generierte Manifestdatei ab, ermitteln, welche Medien-Chunks angefordert werden müssen, und kombinieren sie dann zu einem fertigen Medienerlebnis.

Stream mit <video> wiedergeben

Viele Browser unterstützen die Wiedergabe deines Streams nicht nativ. Es gibt zwar eine native Unterstützung für die HLS-Wiedergabe, aber Browser unterstützen in der Regel keine native DASH-Streamwiedergabe. Das bedeutet, dass es oft nicht ausreicht, das <source> im <video>-Element einfach auf eine Manifestdatei zu verweisen.

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

Was auf den ersten Blick wie ein Defizit erscheint, ist in Wirklichkeit eine verborgene Stärke. Streams sind leistungsstark und Anwendungen, die Streams nutzen, haben unterschiedliche Anforderungen.

Manifestdateien beschreiben in der Regel viele Varianten einzelner Medien. Dazu gehören unterschiedliche Bitrate, mehrere Audiotracks und sogar dieselben Medien, die in verschiedenen Formaten codiert sind.

Bei einigen Anwendungen kann es sinnvoll sein, mehr Video im Puffer zu speichern, bei anderen kann es sinnvoll sein, die ersten Sekunden eines Videos aus einer anstehenden Folge vorab zu laden, und bei anderen kann es sinnvoll sein, eine eigene Logik für das adaptive Streaming zu implementieren. Hier benötigen Sie eine integrierte Browserfunktion, um Medienstreams für die Wiedergabe zu generieren.

Medienquellenerweiterungen

Glücklicherweise hat das W3C Media Source Extensions (MSE) definiert, mit denen unsere Medienstreams mit JavaScript generiert werden können. Mit MSE können Entwickler ein MediaSource-Objekt an ein <video>-Element anhängen und alle Mediendaten wiedergeben, die in die Puffer der MediaSource-Instanz gepumpt werden.

Einfaches Beispiel

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. */ )
  }
);

Das vereinfachte Beispiel oben veranschaulicht einige Dinge:

• <video> empfängt Mediendaten von einer URL.
• Die generierte URL ist nur ein Verweis auf eine MediaSource-Instanz.
• Die MediaSource-Instanz erstellt eine oder mehrere SourceBuffer-Instanzen.
• Anschließend fügen wir dem Puffer einfach binäre Mediendaten hinzu, z. B. mit fetch.

Diese grundlegenden Konzepte sind einfach und es ist durchaus möglich, einen DASH- und HLS-kompatiblen Videoplayer von Grund auf neu zu erstellen. Die meisten Nutzer entscheiden sich jedoch in der Regel für eine der ausgereiften Open-Source-Lösungen, die bereits verfügbar sind, z. B. Shaka Player, JW Player oder Video.js.

Wir haben jedoch eine Demo-Media-PWA namens Kino erstellt, die zeigt, wie Sie Ihre eigene einfache Streaming-Media-Website entwickeln, die die Offlinewiedergabe von Medien mit nur dem einfachen <video>-Element ermöglicht. In unserer Roadmap ist geplant, unter anderem Frameworks und die Verwaltung digitaler Rechte zu unterstützen. Sehen Sie also gelegentlich nach, ob es Neuigkeiten gibt, oder fordern Sie eine Funktion an. Weitere Informationen finden Sie im Artikel PWA mit Offlinestreaming.

Format von Medien-Chunks

Lange Zeit mussten für DASH und HLS Medienblöcke in verschiedenen Formaten codiert werden. 2016 wurde HLS jedoch die Unterstützung für standardmäßige fragmentierte MP4-Dateien (fMP4) hinzugefügt, ein Format, das auch von DASH unterstützt wird.

Video-Chunks, die den fMP4-Container und den H.264-Codec verwenden, werden sowohl von Protokollen unterstützt als auch von der großen Mehrheit von Playern wiedergegeben. So müssen Creator ihre Videos nur einmal codieren, was wiederum Zeit und Speicherplatz spart.

Um eine bessere Qualität und eine geringere Dateigröße zu erzielen, kannst du mehrere Medien-Chunks mit effizienteren Formaten wie VP9 codieren. Bevor wir uns damit befassen, musst du jedoch wissen, wie du Mediendateien für das Web vorbereitest. Das ist das nächste Thema.