Die besten HTML5-Video-Player

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.