Nachdem Adobe Flash Player nun offiziell eingestellt wurde, sind HTML5-Player der neue Branchenstandard. Aus diesem Grund ist es höchste Zeit, über Ihre Optionen für das Videostreaming im Jahr 2021 nachzudenken. In diesem Artikel fassen wir die Funktionsweise von HTML5-Playern zusammen und stellen unsere sechs besten Empfehlungen für das Streaming von Live- und Video-on-Demand (VOD)-Inhalten vor.
Wie funktionieren HTML5-Player?
Als HTML5 die Media Source Extensions (MSE) einführte, wurden die Möglichkeiten der <video>- und <audio>-Elemente erweitert, so dass Inhalte direkt auf einer Webseite oder in einer Anwendung gestreamt werden können, ohne dass zusätzliche Plugins benötigt werden. Die neue Spezifikation basiert auf einer JavaScript-Bibliothek und ermöglicht es, einen Stream aus Video- und Audioblöcken zu erzeugen. Sie bildet die Grundlage für zusätzliche Funktionen, die auf der HTML-Basis aufbauen, wie z. B. das Streaming mit adaptiver Bitrate und die Wiedergabe von geschützten Inhalten mit Encrypted Media Extensions (EME).
HTML5-Player werden von allen modernen Browsern unterstützt und sind eine einfache Möglichkeit, deine Videoinhalte für die Wiedergabe auf fast allen Geräten einzubetten.
Mittlerweile gibt es mehrere HTML5-Player, aber du musst dich zwischen Open-Source- und kostenpflichtigen, kommerziellen Optionen entscheiden.
Der Hauptunterschied zwischen den beiden besteht darin, dass Open-Source-Player kostenlos heruntergeladen und angepasst werden können, während kostenpflichtige, kommerzielle Optionen bereits über umfangreiche Funktionen und Integrationen verfügen. Ein weiterer Unterschied besteht darin, dass Open-Source-Player aufgrund der kontinuierlichen Beiträge ihrer Entwicklergemeinschaft in der Regel schnelle Fehlerbehebungen bieten, während du dich bei kostenpflichtigen Playern bei möglichen Fehlern an das Unternehmen wenden musst.
Abgesehen davon können kommerzielle Optionen eine umfangreiche Liste von Funktionen und Integrationen bieten, die dir Zeit bei der Entwicklung sparen, so dass deine Wahl von deinem Budget und deinen Entwicklungsbedürfnissen abhängen kann.
Unabhängig davon, ob du dich für eine Open-Source- oder eine kommerzielle Variante entscheidest, alle basieren auf der gleichen grundlegende Architektur:
- Ein HTML5 <video> oder <audio> Element
- Die gewünschten Höhen- und Breitenmaße
- Eine definierte Medienquellen-URL
- Anpassbare Steuerelemente
HTML5-Videoplayer können somit ganz einfach in dein HTML eingebettet werden. Wenn du die Wiedergabe einer Videodatei testen möchtest, ist der Beispielcode unten ein Beispiel dafür, was du in eine HTML5-Webseite einfügen würdest.
<html>
<head>
<title>HTML5 Live Streaming Test</title>
</head>
<body>
<video width="640" height="400" controls="controls" src="http://192.168.1.1:1935/live/[myStream]/playlist.m3u"></video>
</body>
</html>Vergiss nicht, dass moderne Medienserver auch nach der Abschaffung von Flash eine RTMP-Quelle aufnehmen und sie für die Auslieferung über HLS in einem HTML5-Player neu verpacken können. Auch wenn Adobe Flash offiziell tot ist, bedeutet das nicht, dass RTMP-Streaming auch tot ist.
Nachdem du nun weißt, wie HTML5-Videoplayer funktionieren, werfen wir einen Blick auf sechs beste Empfehlungen. Unsere Liste enthält sowohl Open-Source- als auch kostenpflichtige Optionen – in keiner bestimmten Reihenfolge:
Flowplayer
Flowplayer hat in der Branche den Ruf, einer der am schnellsten ladenden HTML5-Player zu sein. Sie bieten eine kostenlose Testversion und eine Reihe von Zahlungsoptionen ab 25 USD pro Monat an. Zu den interessanten Integrationen von FlowPlayer gehören Echtzeit-Analysen, Header Bidding und verschiedene Monetarisierungsmöglichkeiten durch Abonnements und Pay-per-View-Lösungen.
Hauptmerkmale:
- Preisgekrönte Monetarisierungsoptionen
- Echtzeit-Analysen und -Diagnosen
- HLS, MPEG-DASH, MP4, WebM
- Erweiterte Werbeplanung
- Wiedergabelisten, Chromecast, ABR
Video.js
Der Open-Source-Player Video.js verwendet einfache Javascript- und CSS-Funktionen, kann aber leicht angepasst werden und wird heute auf über 400.00 Websites eingesetzt. Er unterstützt die Wiedergabe von Live-Streams sowie MP4- und WebM-Dateien und bietet adaptives Bitraten-Streaming (ABR) über HLS und MPEG-DASH. Video.js bietet außerdem ein beliebtes Plugin, mit dem du Google Analytics direkt über den Player verfolgen kannst.
Hier kommst Du zur Demo von Video.js
Hauptmerkmale:
- Vimeo und You Tube Integrationen
- Über 100 Plugins für erweiterte Funktionen
- HLS, MPEG-DASH, MP4, WebM
- Analysen, Werbung, Einfügen von Markenlogos
- Wiedergabelisten, Chromecast, ABR
THEOPlayer
THEOPlayer ist ein kommerzieller HTML5-basierter Videoplayer, der eine Vorintegration in ein breites Video-Ökosystem bietet. Web, mobiles Web, Handy, Set-Top-Boxen, Casting-Geräte und Smart-TVs werden alle von THEO unterstützt und bieten eine beeindruckende Reichweite für die Zuschauer. Eines der beliebtesten Features ist ein SDK, das Apples Low-Latency HLS-Streaming unterstützt und damit zu den ersten Anbietern auf dem Markt gehört.
Hier geht’s zur Demo vom THEOPlayer
Hauptmerkmale:
- HLS, Low-Latency HLS
- MPEG-DASH, CMAF mit niedriger Latenz für DASH
- DRM/Verschlüsselung
- Monetarisierung und Werbung
- Analyse und ABR
hls.js
hls.js basiert auf einer JavaScript-Bibliothek, die direkt auf dem HTML5 <video>-Element aufbaut und einen HLS-Client implementiert. Zu den wichtigsten Funktionen von hls.js gehören die Unterstützung von HLS und fragmentiertem MP4 (fMP4) sowie die Fähigkeit, MPEG-2- und AAC/MP3-Streams in fragmentiertes MP4 zu transmuxen (oder neu zu verpacken). Mithilfe einer umfangreichen API-Bibliothek kannst du Parameter wie Puffergröße, Segmentlänge und Bitrate feinabstimmen. Die Fähigkeit, HLS mit hls.js zu streamen, ist in modernen Browsern nahezu universell, erfordert aber die Unterstützung der Media Source Extensions (MSE) in HTML5.
Hauptmerkmale:
- Fragmentierte MP4-Unterstützung
- VOD- und Live-Wiedergabelisten mit ABR
- Alternativer Ton für VOD- und Live-Playlists
- Untertitel, Untertitel, Analysen, zeitgesteuerte Metadaten
- Widerstandsfähig gegen Fehler/eingebaute Wiederholungsmechanismen
dash.js
Der dash.js-Player ermöglicht die MPEG-DASH-Wiedergabe in jedem Browser, der Media Source Extensions (MSE) unterstützt, und basiert auf JavaScript. Da DASH ein Streaming-Protokoll mit adaptiver Bitrate ist, bietet der dash.js-Player einen der besten adaptiven Streaming-Algorithmen. Da er der offizielle Referenzplayer des DASH Industry Forum ist, kannst du hohe Qualität und Zuverlässigkeit in einer Produktionsumgebung erwarten. Er ist sowohl codec- als auch browserunabhängig und unterstützt browserübergreifendes DRM. Außerdem unterstützt dash.js das neuere DASH-Protokoll mit niedriger Latenzzeit.
Hauptmerkmale:
- Hochwertige MPEG-DASH-Wiedergabe
- Unterstützung für DASH mit niedriger Latenzzeit
- Fortschrittliche ABR-Algorithmen
- Browserübergreifendes DRM, Untertitel
- Live-Wiedergabe von Catchup
Fazit
Es gibt sicherlich viele HTML5-Player, aus denen wählen kannst, aber der Schlüssel, um den richtigen für dich zu finden, liegt darin, einen Player zu finden, der deine individuellen Anforderungen an die Videowiedergabe erfüllt.
- „RankensteinSEO“ nicht Frankenstein SEO! So gewinnst Du den SEO-Contest 2024 - 22. April 2024
- Künstliche Intelligenz: Die Herausforderung, Maschinentext von Menschentext zu unterscheiden - 2. November 2023
- Einstieg in ChatGPT und KI: Ein faszinierender Blick in die Welt der künstlichen Intelligenz - 25. Juli 2023
