Es gibt mehrere Möglichkeiten, einer Webseite Medien hinzuzufügen. Sie haben bereits gelernt, wie Sie das Standard-<video>-Tag verwenden. In diesem Artikel erfahren Sie mehr über einige der verfügbaren Media-Frameworks (oder ‑Bibliotheken), mit denen Sie das Verhalten des standardmäßigen HTML5-Videoplayers erweitern oder ersetzen können.
Medien-Frameworks gibt es sowohl als proprietäre als auch als Open-Source-Variante. Sie basieren auf einer Reihe von APIs, die die Audio- und/oder Videowiedergabe für verschiedene Containerformate und Übertragungsprotokolle unterstützen. Ein gutes Framework hat eine modulare Architektur und bietet eine klare und detaillierte Dokumentation. Idealerweise sollte es auch relativ einfach einzurichten und zu verwenden sein. Sie fragen sich vielleicht: „Wenn der HTML5-Videoplayer bereits die meisten Funktionen bietet, warum sollte ich dann ein Framework oder eine Bibliothek verwenden?“ Das ist eine gute Frage. Sehen wir uns das genauer an.
Vorteile eines Frameworks
In den meisten Fällen, in denen mehr als eine einfache Webseite erforderlich ist, sollten Sie ein Medien-Framework verwenden, um Ihre Inhalte bereitzustellen. Sofern du nicht bereit bist, eine umfangreiche Palette von Funktionen wie Offlinewiedergabe, Streaming, Analysen, Bild-in-Bild, Vorschau-Thumbnails, Einbettung und Monetarisierung (z. B. Optimierung der Auslieferungsrate, Anzeigenplanung oder Header-Gebote) zu entwickeln und zu verwalten, solltest du diese Komplexität einer bestehenden Lösung überlassen.
Hier kommen Media-Frameworks ins Spiel. Sie bieten eine Reihe von Funktionen und Bedingungen, unter denen Sie diese Funktionen verwenden können. Sie müssen dann entscheiden, welches Framework für Ihr Projekt geeignet ist. Im nächsten Artikel erfahren Sie, wie wir eine PWA mit Offline-Streaming entwickelt haben, die mehrere komplexe Funktionen implementiert. Spoiler: Es war viel Arbeit und die Lösung ist noch lange nicht für die Produktion bereit. Sparen Sie sich den Ärger und verwenden Sie ein Framework.
Es gibt viele Optionen zur Auswahl. In diesem Artikel konzentrieren wir uns auf drei: Shaka Player, JW Player und Video.js.
Shaka Player
Laut der Dokumentation ist der Shaka Player von Google eine Open-Source-JavaScript-Bibliothek für adaptive Medien. Es spielt adaptive Medienformate wie DASH und HLS in einem Browser ohne Plugins ab. Stattdessen verwendet der Shaka Player die offenen Webstandards MediaSource Extensions und Encrypted Media Extensions.
Shaka Player unterstützt auch den Offlinespeicher und die Offlinewiedergabe von Medien mit IndexedDB. Inhalte können in jedem Browser gespeichert werden. Die Speicherung von Lizenzen hängt von der Browserunterstützung ab.
Auf der Dokumentationswebsite von Shaka Player findest du eine Anleitung zur grundlegenden Verwendung. Um den Shaka Player zu verwenden, müssen Sie jedoch zuerst eine HTML-Seite mit einem Video- oder Audioelement erstellen. Anschließend installieren Sie die Polyfills im JavaScript Ihrer Anwendung und prüfen, ob der Browser sie unterstützt. Sobald der Browser die Unterstützung für Shaka Player bestätigt hat, wird ein Script erstellt, um ein Player-Objekt zu erstellen, das das Media-Element umschließt, auf Fehler zu achten und dann eine Manifestdatei zu laden. Shaka Player übernimmt dann.
Bei Shaka müssen Sie Ihre Mediendateien selbst hosten und codieren. Das Erstellen eines Medienservers ist nicht allzu kompliziert, das Codieren/Transcodieren von Medien kann jedoch zeitaufwendig und kompliziert sein. Du solltest diesen Teil wahrscheinlich an einen Dienst wie Zencoder, Amazon Elastic Encoder oder die Google Transcoder API auslagern, um sich wiederholende Aufgaben zu automatisieren und den Prozess zu beschleunigen.
Das Tolle am Shaka Player ist, dass es auch ein wirklich fantastisches Tool und ein Media-Packaging-SDK für die DASH- und HLS-Verpackung und -Verschlüsselung namens Shaka Packager gibt. Sie können damit Medieninhalte für das Onlinestreaming vorbereiten und verpacken. Wie das geht, haben Sie bereits in den Abschnitten Medienkonvertierung und Medienverschlüsselung erfahren.
JW Player
Wenn du nach einer Option suchst, die Hosting- und Codierungs-/Transcodierungsdienste bietet, solltest du dir JW Player ansehen. Beachte aber, dass JW Player proprietäre Software ist. Das bedeutet, dass Sie nur wenig Kontrolle über die Plattform oder die Roadmap haben. Es gibt eine kostenlose Basisversion, bei der Videos mit einem Wasserzeichen versehen werden, und eine kommerzielle Version.
JW Player unterstützt Streaming mit MPEG-DASH (nur kostenpflichtige Version), digitale Rechteverwaltung (DRM) (mit Vualto), interaktive Werbung, Anpassung der Benutzeroberfläche und Einbettungen. Es gibt eine gut dokumentierte API und ein SDK. Wenn Sie jedoch nur eine schnelle und kostenlose Möglichkeit zum Hosten Ihrer Medien suchen, ist das Einbetten von YouTube-Videos in der Regel die beste kostenlose Option.
Video.js
Laut der Website wurde Video.js von Grund auf für die HTML5-Welt entwickelt. Es unterstützt HTML5-Videos und moderne Streamingformate wie DASH und HLS sowie YouTube und Vimeo. Er unterstützt die Videowiedergabe auf Computern und Mobilgeräten und sieht dank CSS-basierter Skins überall gut aus.
Es gibt verschiedene Möglichkeiten, Video.js zu verwenden. Am einfachsten ist es, die kostenlose CDN-Version von Fastly zu verwenden. Weitere Informationen zur Einrichtung des Players findest du auf der Seite Einstieg. Video.js ist ein sehr leistungsstarker Videoplayer. Ähnlich wie beim Shaka Player müssen Sie auch Ihr Video hosten und codieren. Ein Unterschied besteht jedoch beim Plug-in-System, mit dem Sie beispielsweise YouTube-Videos im Video.js-Player abspielen können, der auch angepasst werden kann.
Andere Frameworks
Es gibt viele verschiedene Frameworks und Bibliotheken. In diesem Artikel werden nur einige davon vorgestellt. Bei der Auswahl eines Frameworks sollten Sie berücksichtigen, welche Funktionen Sie für das Projekt benötigen und wie Sie Ihre Medien hosten und codieren oder transkodieren möchten. Benötigst du Pre-Roll-Anzeigen oder andere Monetarisierungsstrategien? Sind meine Medien offline verfügbar? Wie groß ist Ihr Budget? Oder eine Reihe anderer Aspekte. Recherchieren Sie und fragen Sie Personen in Ihrem Netzwerk um Vorschläge. Es gibt Dutzende weiterer großartiger Optionen. Bevor Sie eine Entscheidung treffen, nehmen Sie sich Zeit, um eine auszuwählen, die für Ihr Team geeignet ist, und vermeiden Sie unnötige technische Schulden oder Komplexität, die während des gesamten Projektzyklus aufrechterhalten werden muss.
Als Nächstes erfahren Sie mehr über die PWA mit Offlinestreaming, die wir entwickelt haben, um zu zeigen, wie Sie die wichtigsten Herausforderungen bei der Einführung einer eigenen Lösung mit nur dem HTML5-Videoobjekt angehen und bewältigen können, ohne dass ein Framework die schwere Arbeit übernimmt.