Es gibt mehrere Möglichkeiten, einer Webseite Medien hinzuzufügen. Sie haben bereits gelernt, wie das Standard-<video>-Tag verwendet wird. In diesem Artikel erfährst du mehr über einige der verfügbaren Medien-Frameworks (oder Bibliotheken), mit denen du das Verhalten des Standard-HTML5-Videoplayers erweitern oder ersetzen kannst.
Medien-Frameworks gibt es sowohl in der proprietären als auch als Open-Source-Variante. Im Kern sind sie eine 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 sollten sie auch relativ einfach einzurichten und zu verwenden sein. Du fragst dich vielleicht: "Wenn der HTML5-Videoplayer die meisten Funktionen bereits bietet, warum sollte ich dann ein Framework oder eine Bibliothek verwenden?" Das ist eine gute Frage, legen wir los.
Vorteile eines Frameworks
In den meisten Situationen, die die Anforderungen einer einfachen Webseite übersteigen, empfiehlt es sich, ein Medien-Framework zur Bereitstellung Ihrer Inhalte zu verwenden. Wenn Sie nicht bereit sind, umfangreiche Funktionen wie Offlinewiedergabe, Streaming, Analysen, Bild im Bild, Vorschau-Miniaturansichten, Einbettung und Monetarisierung (z. B. Optimierung der Ausführungsrate, Anzeigenplanung oder Header Bidding) zu entwickeln und zu verwalten, sollten Sie diese Komplexität einer vorhandenen Lösung überlassen.
Hier kommen Medienkonzepte ins Spiel. Sie bieten Ihnen eine Reihe von Funktionen und Bedingungen, unter denen Sie diese Funktionen verwenden können, und müssen dann entscheiden, welches Framework für Ihr Projekt am besten geeignet ist. Im nächsten Artikel erfahren Sie, wie wir eine PWA mit Offline-Streaming erstellen, die mehrere komplexe Funktionen implementiert. Achtung, das war mit einem hohen Aufwand verbunden, aber die Lösung ist noch lange nicht produktionsreif. Ersparen Sie sich die Mühe und verwenden Sie ein Framework.
Es gibt eine große Auswahl. Zunächst konzentrieren wir uns auf drei davon: Shaka Player, JW Player und Video.js.
Shaka-Spieler
Laut Dokumentation ist der Shaka Player von Google eine Open-Source-JavaScript-Bibliothek für adaptive Medien. Dabei werden adaptive Medienformate wie DASH und HLS in einem Browser ohne Plug-ins wiedergegeben. Stattdessen verwendet Shaka Player die offenen Webstandards MediaSource Extensions und Encrypted Media Extensions.
Der Shaka Player unterstützt auch die Offlinespeicherung und -wiedergabe von Medien mithilfe von IndexedDB. Inhalte können in jedem Browser gespeichert werden. Die Speicherung von Lizenzen hängt von der Browserunterstützung ab.
Anleitungen für die grundlegende Verwendung finden Sie auf der Dokumentationswebsite für Shaka Player. Um den Shaka Player zu verwenden, müssen Sie jedoch zuerst eine HTML-Seite mit einem Video- oder Audioelement erstellen. Installieren Sie dann im JavaScript-Code Ihrer Anwendung die Polyfills und prüfen Sie, ob der Browser unterstützt wird. Sobald der Browser die Unterstützung von Shaka Player bestätigt hat, erstellt ein Skript ein Player-Objekt, um das Medienelement zu umschließen, auf Fehler zu warten und dann eine Manifestdatei zu laden. Shaka Player übernimmt von dort.
Bei Shaka müssen Sie Ihre Mediendateien selbst hosten und codieren. Das Erstellen eines Medienservers ist nicht allzu komplex. Die Codierung/Transcodierung von Medien kann jedoch zeitaufwendig und kompliziert sein. Sie werden diesen Teil wahrscheinlich einem Dienst wie Zencoder, Amazon Elastic Encoder oder der Google Transcoder API überlassen, um sich wiederholende Aufgaben zu automatisieren und den Prozess zu beschleunigen.
Das Tolle am Shaka Player ist, dass es auch ein fantastisches Tool und ein SDK für die Medienverpackung für die DASH- und HLS-Paketerstellung und -Verschlüsselung namens Shaka Packager gibt. Damit lassen sich Medieninhalte für das Onlinestreaming vorbereiten und verpacken. Dies ist bereits in den Abschnitten Medienkonvertierung und Medienverschlüsselung bekannt.
JW Player
Falls Sie nach einer Option suchen, die Hosting-, Codierungs- und Transcodierungsdienste anbietet, sollten Sie sich JW Player ansehen. Denken Sie jedoch daran, dass es sich bei JW Player um eine proprietäre Software handelt. Sie haben also nicht viel Kontrolle über die Plattform oder Roadmap. Es gibt eine kostenlose Basisversion, bei der Videos mit einem Wasserzeichen angezeigt werden, und eine kommerzielle Version.
JW Player unterstützt Streaming mit MPEG-DASH (nur kostenpflichtige Version), Digital Rights Management (DRM) (mit Vualto), interaktive Werbung, die Anpassung der Benutzeroberfläche und Einbettungen. Es gibt eine gut dokumentierte API und ein gut dokumentiertes SDK. Wenn du jedoch nur nach einer schnellen und kostenlosen Möglichkeit zum Hosten deiner Medien suchst, ist das Einbetten von YouTube-Videos in der Regel die beste Option.
Video.js
Laut der Website wurde Video.js speziell für HTML5 entwickelt. Sie unterstützt HTML5-Videos und moderne Streamingformate wie DASH und HLS sowie YouTube und Vimeo. Es unterstützt die Videowiedergabe auf Desktop- und Mobilgeräten und sieht mit CSS-basierten Skins überall gut aus.
Es gibt verschiedene Möglichkeiten, Video.js zu verwenden. Am einfachsten ist es aber, die kostenlose CDN-Version von Fastly zu verwenden. Weitere Informationen zum Einrichten des Players findest du auf der Seite Erste Schritte. Video.js ist ein sehr leistungsstarker Videoplayer. Ähnlich wie Shaka Player müssen Sie Ihr Video auch hosten und codieren. Ein Unterschied besteht jedoch im Plug-in-System, mit dem Sie z. B. YouTube-Videos im Video.js-Player abspielen können, das ebenfalls angepasst werden kann.
Weitere Frameworks
Es stehen viele verschiedene Frameworks und Bibliotheken zur Verfügung. Dieser Artikel stellt nur einen groben Überblick über das, was da draußen ist. Bei der Auswahl eines Frameworks sollten Sie berücksichtigen, welche Funktionen Sie für das Projekt benötigen und wie Sie Ihre Medien hosten, codieren oder transcodieren möchten. Benötigen Sie Pre-Roll-Anzeigen oder andere Monetarisierungsstrategien? Werden Ihre Medien offline verfügbar sein? Wie groß oder klein ist Ihr Budget? Oder eine andere Anzahl von Überlegungen. Recherchieren Sie und bitten Sie Personen in Ihrem Netzwerk um Vorschläge. Es gibt noch viele weitere gute Optionen. Bevor Sie sich entscheiden, sollten Sie eine geeignete Option für Ihr Team auswählen. Vermeiden Sie es, während des Projektlebenszyklus unnötige technische Altlasten oder Komplexität zu schaffen.
Als Nächstes erfahren Sie mehr über die PWA mit Offline-Streaming, die wir entwickelt haben, um zu zeigen, wie Sie die größten Herausforderungen meistern, die mit dem Roll-out Ihrer eigenen Lösung einhergehen, indem Sie nur das HTML5-Videoobjekt ohne Framework verwenden, das die schwierigen Aufgaben übernimmt.