Es gibt mehrere Möglichkeiten, einer Webseite Medien hinzuzufügen. Sie haben bereits gelernt, wie das Standard-<video>-Tag verwendet wird. In diesem Artikel erfahren Sie mehr über einige der verfügbaren Medien-Frameworks (oder -Bibliotheken), mit denen Sie das Verhalten des standardmäßigen HTML5-Videoplayers erweitern oder ersetzen können.
Medien-Frameworks sind sowohl proprietär als auch als Open-Source erhältlich. Im Kern besteht ihr Kern aus 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 die meisten Funktionen bereits hat, 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 über die Anforderungen einer einfachen Webseite hinausgehen, sollten Sie ein Medien-Framework zur Bereitstellung Ihrer Inhalte verwenden. Sofern Sie nicht bereit sind, umfassende Funktionen wie Offlinewiedergabe, Streaming, Analysen, Bild im Bild, Vorschau-Thumbnails, Einbettungen und Monetarisierung (z. B. Optimierung der Ausführungsrate, Anzeigenplanung oder Header Bidding) zu entwickeln und zu verwalten, sollten Sie diese Komplexität einer bestehenden Lösung überlassen.
Hier kommen Medienkonzepte ins Spiel. Sie liefern Ihnen eine Reihe von Funktionen und Bedingungen, unter denen Sie diese Funktionen verwenden können, und Sie 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 Offlinestreaming erstellen, die mehrere komplexe Funktionen implementiert. Achtung, das war viel Arbeit und ist noch weit davon entfernt, eine produktionsreife Lösung zu sein. Ersparen Sie sich Kopfzerbrechen und verwenden Sie ein Framework.
Es gibt viele Möglichkeiten. In diesem Artikel 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. Adaptive Medienformate wie DASH und HLS werden in einem Browser ohne Plug-ins abgespielt. Stattdessen verwendet Shaka Player die offenen Webstandards MediaSource Extensions und Encrypted Media Extensions.
Shaka Player unterstützt auch die Offlinespeicherung und -wiedergabe von Medien mit IndexedDB. Inhalte können in jedem Browser gespeichert werden. Die Speicherung von Lizenzen hängt von der Browserunterstützung ab.
Eine Anleitung zur grundlegenden Verwendung findest du auf der Dokumentationswebsite für Shaka Player. Um den Shaka Player nutzen zu können, müssen Sie jedoch zunächst eine HTML-Seite mit einem Video- oder Audioelement erstellen. Polyfills installieren Sie im JavaScript-Code Ihrer Anwendung und überprüfen die Browserunterstützung. Sobald der Browser die Unterstützung für 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.
Mit Shaka musst du deine Mediendateien selbst hosten und codieren. Das Erstellen eines Medienservers ist nicht allzu komplex, die Codierung/Transcodierung von Medien kann jedoch zeitaufwendig und kompliziert sein. Möglicherweise möchten Sie diesen Teil zu einem Dienst wie Zencoder, Amazon Elastic Encoder oder der 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 Media Packing SDK für DASH- und HLS-Paketerstellung und -Verschlüsselung gibt: Shaka Packager. Damit lassen sich Medieninhalte für das Onlinestreaming vorbereiten und bündeln, wie Sie zuvor unter Medienkonvertierung und Medienverschlüsselung erfahren haben.
JW Player
Wenn Sie nach einer Option suchen, die Hosting-, Codierungs-/Transcodierungsdienste anbietet, können Sie sich JW Player ansehen. Beachten Sie jedoch, dass JW Player proprietäre Software ist. Das heißt, Sie haben nicht viel Kontrolle über die Plattform oder Roadmap. Es gibt eine einfache kostenlose Version, bei der Videos mit einem Wasserzeichen angezeigt werden, und eine kommerzielle Version.
JW Player unterstützt Streaming mit MPEG-DASH (nur kostenpflichtige Version), DRM (mit Vualto), interaktiver Werbung, Anpassungen der Oberfläche und Einbettungen. Es gibt eine gut dokumentierte API und ein SDK. Wenn Sie Ihre Medien jedoch schnell und kostenlos hosten möchten, ist das Einbetten von YouTube-Videos in der Regel die beste kostenlose Option.
Video.js
Laut der Unternehmenswebsite wurde Video.js von Grund auf für HTML5 entwickelt. Unterstützt werden HTML5-Videos, moderne Streamingformate wie DASH und HLS sowie YouTube und Vimeo. Sie unterstützt die Videowiedergabe auf Computern und Mobilgeräten und sieht mit CSS-basierten Skins überall gut aus.
Es gibt verschiedene Möglichkeiten, Video.js zu verwenden. Die einfachste Möglichkeit ist jedoch die kostenlose CDN-Version von Fastly. Weitere Informationen zur Einrichtung des Players findest du auf der Seite Erste Schritte. 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 im Plug-in-System, mit dem Sie beispielsweise YouTube-Videos im Video.js-Player abspielen und anpassen können.
Weitere Frameworks
Es sind viele verschiedene Frameworks und Bibliotheken verfügbar. Dieser Artikel hebt nur die Oberfläche auf, was es da draußen gibt. 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 transcodieren möchten. Brauchst du Pre-Roll-Anzeigen oder andere Monetarisierungsstrategien? Sind Ihre Medien offline verfügbar? Wie groß oder klein ist Ihr Budget? Oder bei anderen Aspekten. Recherchieren Sie und fragen Sie Personen in Ihrem Netzwerk nach Vorschlägen. Es gibt Dutzende weitere hervorragende Optionen. Bevor Sie eine Entscheidung treffen, nehmen Sie sich etwas Zeit, um sich für eine Option zu entscheiden, die für Ihr Team am besten geeignet ist. Vermeiden Sie unnötige technische Altlasten oder eine komplexe Komplexität, die während des Projektlebenszyklus gepflegt werden muss.
Als Nächstes erfahren Sie mehr über die von uns entwickelte PWA mit Offlinestreaming. Sie erfahren, wie Sie die größten Herausforderungen bewältigen, die mit der Einführung einer eigenen Lösung einhergehen. Dazu benötigen Sie lediglich das HTML5-Videoobjekt ohne ein Framework, das Ihnen die meiste Arbeit abnimmt.