Grundlagen des Media-Streamings

Derek Herman
Derek Herman
X GitHub
Jaroslav Polakovič
Jaroslav Polakovič
X GitHub

In diesem Artikel erfahren Sie mehr über das fortgeschrittene Medienkonzept und am Ende ein gutes Verständnis der verschiedenen Streaming-Anwendungsfälle, -Protokolle und -Erweiterungen. Beginnen wir mit einer was Streaming eigentlich ist.

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

Zur Bereitstellung des Streamings auf Ihrer Website muss der Server muss den HTTP-Anfrageheader Range unterstützen. Weitere Informationen zum Accept-Ranges Überschrift im <video> und <source> Tags.

Streaming-Anwendungsfälle

Das Erstellen von Medienblöcken und den erforderlichen Manifesten, die den Stream beschreiben, ist nicht ist unkompliziert. Streaming bietet jedoch interessante Anwendungsfälle, lässt sich das nicht erreichen, indem Sie einfach auf ein <video>-Element verweisen. auf eine Reihe statischer Quelldateien. Im weiteren Verlauf dieses Kurses einer Webseite Medien hinzufügen. Zunächst einmal sollten Sie eine Es gibt wenige Anwendungsfälle für das Streaming von Multimedia. Mehrere Dateien in das Element <video> werden geladen.

  • Beim Adaptiven Streaming werden Medienblöcke in mehreren und einen qualitativ hochwertigsten Medienblock, der passt die aktuell verfügbare Bandbreite an den Mediaplayer zurückgegeben wird.
  • Bei der Liveübertragung werden Medienblöcke codiert und in in Echtzeit.
  • Beim Einschleusen von Medien werden andere Medien wie Werbung in ohne dass der Player die Medienquelle ändern muss.

Streamingprotokolle

Die beiden am häufigsten verwendeten Streaming-Protokolle im Internet sind dynamische Adaptives Streaming over HTTP (DASH) und HTTP Live Streaming (HLS). Player, die diese Protokolle unterstützen, rufen die generierte Manifestdatei ab. herausgefunden, welche Medienblöcke angefordert werden sollen, und kombinieren diese Medienerlebnis zu bieten.

<video> zum Abspielen eines Streams verwenden

Viele Browser können deinen Stream nicht nativ wiedergeben. Es gibt zwar einige Native Unterstützung für HLS-Wiedergabe, Browser unterstützen normalerweise kein natives DASH Streamwiedergabe. Häufig reicht es also nicht aus, einfach auf <source> zu verweisen im <video>-Element in eine Manifestdatei.

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

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

Manifestdateien beschreiben in der Regel viele Varianten eines einzelnen Mediums. Denken Sie anders Bitraten, mehrere Audiotracks und sogar dasselbe Medium, das in unterschiedlichen Formaten.

Einige Anwendungen möchten möglicherweise eine größere Menge an Videos im Puffer speichern, die ersten paar Sekunden eines Videos aus einem und einige wollen ihre eigene Logik für adaptives Streaming implementieren. Für diese Funktion benötigen Sie eine integrierte Browserfunktion. zum Generieren von Medien-Streams für die Wiedergabe.

Medienquellenerweiterungen

Glücklicherweise definierte das W3C eine sogenannte Media Source Extensions (MSE). mit dem JavaScript unsere Media-Streams generieren kann. Kurz gesagt ermöglicht MSE können Entwickelnde ein MediaSource-Objekt an ein <video>-Element anhängen werden alle gepumpten Mediendaten in die Zwischenspeicher geladen, die mit dem MediaSource-Instanz.

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 einfach binäre Mediendaten in den Puffer an, z.B. mit fetch.

Diese grundlegenden Konzepte sind zwar einfach, aber es ist sicherlich möglich, DASH- und HLS-kompatibler Videoplayer von Grund auf. 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 Demo-Medien-PWA namens Kino erstellt, die zeigt, wie Sie Ihre eigene Streaming-Media-Website entwickeln, die Offline-Medienwiedergabe mit dem einfachen <video>-Element. Es gibt Pläne in unserer Roadmap, um u. a. Frameworks und die digitale Rechteverwaltung zu unterstützen. Funktionen. 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 mit unterschiedlichen Formaten. 2016 wurden jedoch standardmäßige fragmentierte MP4-Dateien (fMP4) unterstützt. wurde dem HLS-Format hinzugefügt. Dieses Format wird auch von DASH unterstützt.

Video-Chunks, die den fMP4-Container und den H.264-Codec verwenden, werden unterstützt sowohl nach Protokollen als auch von der großen Mehrheit der Spieler. Dadurch können Sie Content-Produzenten ihre Videos nur einmal codieren müssen, was wiederum Zeit spart. und Speicherplatz.

Um eine bessere Qualität und geringere Dateigrößen zu erzielen, können Sie Codieren Sie mehrere Sätze von Medienblöcken mit effizienteren Formaten wie VP9, Aber bevor wir weitermachen, müssen Sie zunächst lernen, wie Sie Bereite Mediendateien für das Web vor und los gehts.