Grundlagen des Media-Streamings

Derek Herman

Jaroslav Polakovič

In diesem Artikel erfahren Sie mehr über das fortgeschrittene Konzept des Medienstreamings und sollten am Ende ein gutes Verständnis der verschiedenen Anwendungsfälle, Protokolle und Erweiterungen für Streaming haben. Beginnen wir mit einer Erklärung, was Streaming eigentlich ist.

Medienstreaming ist eine Möglichkeit, Medieninhalte Stück für Stück zu übermitteln und wiederzugeben. Anstatt eine einzelne Datei zu laden, die langsam sein kann, wenn sie nicht für das Netzwerk optimiert ist, liest der Player eine Manifestdatei, in der beschrieben wird, wie die Zielmedien in einzelne Datenblöcke aufgeteilt werden. Medienblöcke werden später zur Laufzeit dynamisch wieder zusammengefügt, wahrscheinlich mit verschiedenen Bitraten, über die Sie später mehr erfahren werden.

Damit Streaming auf Ihrer Website bereitgestellt werden kann, muss der Server den HTTP-Anfrageheader Range unterstützen. Weitere Informationen zum Header Accept-Ranges finden Sie im Artikel zu den <video>- und <source>-Tags.

Streaming-Anwendungsfälle

Das Erstellen von Medienblöcken und den erforderlichen Manifesten, die den Stream beschreiben, ist nicht ganz einfach. Streaming bietet jedoch einige interessante Anwendungsfälle, die sich nicht durch Verweisen eines <video>-Elements auf eine Reihe statischer Quelldateien realisieren lassen. Wie Sie einer Webseite Medien hinzufügen, erfahren Sie weiter unten. Weitere Informationen Machen Sie sich zuerst mit einigen Anwendungsfällen für das Streaming von Multimedia vertraut, wenn Sie nicht nur mehrere Dateien in das Element <video> laden möchten.

• 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 Werbung in einen Stream eingeschleust, 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 Medienblöcke angefordert werden, und kombinieren diese dann in der endgültigen Medienumgebung.

<video> zum Abspielen eines Streams verwenden

Viele Browser können deinen Stream nicht nativ wiedergeben. Es gibt zwar eine native Unterstützung für die HLS-Wiedergabe, aber Browser unterstützen in der Regel keine native DASH-Streamwiedergabe. Häufig reicht es also nicht aus, das <source> im <video>-Element einfach auf eine Manifestdatei zu verweisen.

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

Achtung : Dies ist zwar gültiger HTML-Code, funktioniert aber nicht. Die Browser unterstützen nicht nativ die Wiedergabe des DASH-Manifests, das der Eigenschaft src hinzugefügt wird.

Was wie ein Defizit erscheint, ist in Wirklichkeit eine Stärke in der Verkleidung. Streams sind leistungsstark und Anwendungen, die Streams nutzen, haben unterschiedliche Anforderungen.

Manifestdateien beschreiben in der Regel viele Varianten eines einzelnen Mediums. Es gibt unterschiedliche Bitraten, mehrere Audiotracks und sogar dasselbe Medium, das in unterschiedlichen Formaten codiert ist.

Einige Anwendungen möchten möglicherweise eine größere Menge an Videos im Zwischenspeicher behalten, andere möchten die ersten Sekunden des Videos aus einer bevorstehenden Folge vorab abrufen und andere möchten ihre eigene Logik für adaptives Streaming implementieren. Hier benötigen Sie eine integrierte Browserfunktion, mit der Medienstreams für die Wiedergabe generiert werden können.

Medienquellenerweiterungen

Glücklicherweise hat das W3C eine sogenannte Media Source Extensions (MSE) definiert, mit der JavaScript unsere Medienstreams generieren kann. Kurz gesagt: MSE ermöglicht Entwicklern, ein MediaSource-Objekt an ein <video>-Element anzuhängen und alle Mediendaten wiederzugeben, die in die Zwischenspeicher gepumpt werden, die an die Instanz MediaSource angehängt sind.

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 Instanz MediaSource erstellt eine oder mehrere SourceBuffer-Instanzen.
• Dann fügen wir dem Zwischenspeicher einfach binäre Mediendaten hinzu, z.B. mit fetch.

Diese grundlegenden Konzepte sind zwar einfach und es ist durchaus möglich, einen DASH- und HLS-kompatiblen Videoplayer von Grund auf neu zu schreiben, aber die meisten Nutzer entscheiden sich für eine der ausgereiften Open-Source-Lösungen, die bereits vorhanden sind, z. B. Shaka Player, JW Player oder Video.js, um nur einige zu nennen.

Wir haben jedoch eine Demo-Medien-PWA namens Kino erstellt, die zeigt, wie Sie Ihre eigene einfache Streaming-Media-Website entwickeln, die eine Offline-Medienwiedergabe mit dem einfachen <video>-Element ermöglicht. In unserer Roadmap gibt es Pläne, unter anderem Frameworks und die digitale Rechteverwaltung zu unterstützen. Schauen Sie also von Zeit zu Zeit vorbei, um sich über Updates zu informieren, oder fordern Sie eine Funktion an. Weitere Informationen dazu findest du im Artikel PWA mit Offlinestreaming.

Format der Medienblöcke

Lange Zeit mussten für DASH und HLS Medienblöcke in verschiedenen Formaten codiert werden. Seit 2016 werden fragmentierte MP4-Standarddateien (fMP4) dem HLS-Format hinzugefügt, 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 können Inhaltsersteller ihre Videos nur einmal codieren, was Zeit und Speicherplatz spart.

Wenn Sie eine bessere Qualität und geringere Dateigrößen erzielen möchten, können Sie mehrere Sätze von Medienblöcken mit effizienteren Formaten wie VP9 codieren. Bevor wir jedoch weitermachen, müssen Sie sich zuerst damit vertraut machen, wie Sie Mediendateien für das Web vorbereiten.