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 Streaming-Anwendungsfälle, -Protokolle und -Erweiterungen haben. Beginnen wir mit einer Erklärung, was Streaming eigentlich ist.

Mit Media-Streaming können Medieninhalte Stück für Stück geliefert und wiedergegeben werden. Anstatt eine einzelne Datei zu laden, was langsam sein kann, wenn sie nicht für das Netzwerk optimiert ist, liest der Player eine Manifestdatei, in der beschrieben wird, wie das Zielmedium in einzelne Datenblöcke aufgeteilt wird. Medienblöcke werden später zur Laufzeit dynamisch zusammengefügt – wahrscheinlich mit unterschiedlichen Bitraten. Mehr dazu erfahren Sie später.

Beachten Sie, dass der Server den Range-HTTP-Anfrageheader unterstützen muss, um Streaming auf Ihrer Website bereitzustellen. Weitere Informationen zum Accept-Ranges-Header finden Sie im Artikel <video>- und <source>-Tags.

Anwendungsfälle für das Streaming

Das Erstellen von Medienblöcken und der erforderlichen Manifeste zur Beschreibung des Streams ist nicht ganz einfach. Beim Streaming lassen sich jedoch einige interessante Anwendungsfälle erschließen, die sich nicht allein dadurch erreichen lassen, dass ein <video>-Element auf eine Reihe statischer Quelldateien verweist. In einem späteren Abschnitt erfahren Sie mehr darüber, wie Sie einer Webseite Medien hinzufügen. Zuerst sollten Sie sich über einige Anwendungsfälle für das Streaming von Multimedia-Inhalten informieren, wenn Sie nicht nur mehrere Dateien in das <video>-Element laden möchten.

• Beim adaptiven Streaming werden Medienblöcke in mehreren Bitraten codiert. Der Medienblock mit der höchsten Qualität, der zur aktuell verfügbaren 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 Einfügen 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 adaptives Streaming over HTTP (DASH) und HTTP Live Streaming (HLS). Player, die diese Protokolle unterstützen, rufen die generierte Manifestdatei ab, ermitteln, welche Medien-Chunks angefragt werden sollen, und kombinieren diese dann im endgültigen Medienerlebnis.

<video> zum Abspielen eines Streams verwenden

Viele Browser unterstützen die native Wiedergabe deines Streams. Es gibt zwar einige native Unterstützung für die HLS-Wiedergabe, aber Browser unterstützen die native DASH-Stream-Wiedergabe in der Regel nicht. Daher reicht es oft nicht aus, einfach das <source> im <video>-Element auf eine Manifestdatei zu verweisen.

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

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

Was wie ein Defizit erscheint, ist eigentlich eine verborgene Stärke. Streams sind leistungsstark und Anwendungen, die Streams nutzen, haben andere Anforderungen.

Manifestdateien beschreiben in der Regel viele Varianten eines einzelnen Mediums. Denken Sie an unterschiedliche Bitraten, mehrere Audiotracks und sogar dieselben Medien, die in verschiedenen Formaten codiert sind.

Einige Anwendungen möchten möglicherweise eine größere Menge an Video im Zwischenspeicher belassen, andere möchten die ersten Sekunden eines Videos aus einer bevorstehenden Folge vorab abrufen und andere eine eigene Logik für adaptives Streaming implementieren. Hier sollten Sie eine integrierte Browserfunktion haben, um Medienstreams für die Wiedergabe zu generieren, und es gibt eine.

Medienquellenerweiterungen

Glücklicherweise hat das W3C eine sogenannte Media Source Extensions (MSE) definiert, mit der JavaScript unsere Medienstreams generieren kann. Kurz gesagt: Mit MSE können Entwickler ein MediaSource-Objekt an ein <video>-Element anhängen und es alle Mediendaten wiedergeben, die in die Puffer geladen werden, die an die MediaSource-Instanz 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 hängen wir nur binäre Mediendaten in den Zwischenspeicher an, z.B. mit fetch.

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

Wir haben jedoch eine Medien-PWA mit dem Namen Kino erstellt, die zeigt, wie Sie Ihre eigene einfache Streaming-Medien-Website entwickeln, die nur das einfache <video>-Element für die Offline-Medienwiedergabe bietet. In unserer Roadmap gibt es unter anderem Pläne zur Unterstützung von Frameworks und der Verwaltung digitaler Rechte. Schauen Sie also von Zeit zu Zeit vorbei oder fordern Sie eine neue Funktion an. Weitere Informationen dazu finden Sie im Artikel PWA mit Offlinestreaming.

Media-Chunks-Format

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

Video-Chunks, die den fMP4-Container und den H.264-Codec verwenden, werden von beiden Protokollen unterstützt und können von der Mehrheit der Spieler abgespielt werden. So können Inhaltsersteller ihre Videos nur einmal codieren, was wiederum Zeit und Speicherplatz spart.

Um eine bessere Qualität und geringere Dateigrößen zu erzielen, sollten Sie mehrere Gruppen von Medienblöcken mit effizienteren Formaten wie VP9 codieren. Bevor wir zum nächsten Schritt kommen, müssen Sie sich jedoch zuerst mit der Vorbereitung von Mediendateien für das Web vertraut machen. Das kommt als Nächstes.