Wie funktioniert HTML5-Video? | HTML-Video

Was ist HTML5?

HTML5 ist die neueste Version der Hypertext Markup Language (HTML), einer Kodiersprache, mit der Inhalte im Internet formatiert werden. Alle Webseiten teilen Browsern mit Hilfe von HTML mit, wie ihr Inhalt angezeigt werden soll. Im Vergleich zu früheren HTML-Versionen bietet HTML5 eine Reihe zusätzlicher Features, darunter die Möglichkeit, Videos in eine Webseite einzufügen. Weitere Features von HTML5 sind die Unterstützung von SVG-Grafiken, Tags zur Definition der Navigation auf einer Website sowie Header- und Footer-Tags.

Wie funktioniert das HTML5-Videoelement?

Das HTML5-Videoelement weist den Browser an, eine Videodatei aus einer anderen Quelle zu laden, indem es den Speicherort der Videodatei angibt, ähnlich wie ein Browser eine Bilddatei lädt (das Bild selbst ist nicht in der HTML-Datei gespeichert – der Browser holt es von einem anderen Ort). Mit Attributen wie Breite, Höhe und anderen können Sie dem Browser mitteilen, wie das Video angezeigt werden soll. Andere Markup-Codes sagen dem Browser, wo er das Video auf der Seite platzieren soll.

Der HTML5-Video-Tag ist <video> und wird, ähnlich wie andere HTML-Elemente, mit </video> geschlossen.

Zwischen diesen Tags befindet sich ein <source>-Tag, der den Speicherort der Videodatei angibt. Innerhalb dieses Tags werden sowohl die Videoquelle (src) als auch der Typ der Datei (type) wie folgt angegeben:

<video>
  <source src="example.mp4" type="video/mp4">
</video>

Die folgenden wichtigen Attribute können ebenfalls in den <video>-Tag eingefügt werden:

• Breite: Hier wird die Breite des Videos in Pixeln angegeben. Die Anzahl der Pixel steht zwischen Anführungszeichen: width="370"
• Höhe: Dies gibt die Höhe des Videos an. Es funktioniert ähnlich wie das Attribut width.
• Abspielen, Pause, Lautstärke: Mit diesen Steuerelementen kann der Nutzer die Videowiedergabe steuern. Fügen Sie dem <video>-Tag Steuerelemente hinzu, um sie einzubinden.

Auch alternative Quellen für das Video können zwischen den <video>-Tags eingefügt werden, falls ein Browser das erste Dateiformat nicht unterstützt. Browser verwenden immer die zuerst aufgeführte Quelle.

Außerdem kann zwischen den <video>-Tags Text eingefügt werden. Dieser Text wird nur angezeigt, wenn der Browser des Nutzers kein HTML5-Video unterstützt.

Zusammengefasst könnte der HTML5-Code für ein eingebettetes Video so aussehen:

<video controls width="370" height="130">
  <source src="example.mp4" type="video/mp4">
  <source src="alternate-example.webm" type="video/webm">
Your browser does not support HTML5 video.
</video>

Eine Reihe anderer Attribute wie autoplay (um das Video abzuspielen, sobald die Seite geladen ist), loop (um Videos in einer Schleife abzuspielen), muted (um Videos stumm zu schalten) und poster (um ein Bild zu zeigen, bevor das Video geladen wird) können ebenfalls innerhalb des Videoelements verwendet werden. Mozilla bietet eine gute Dokumentation über diese Attribute.

Welches Streaming-Protokoll wird mit HTML5 verwendet?

HTML5 ist selbst kein Streaming-Protokoll. Websites, die mit HTML5 erstellt wurden, können verschiedene Streaming-Protokolle zur Wiedergabe von Videos verwenden, darunter HTTP Live Streaming (HLS) und MPEG-DASH. Dies wird serverseitig konfiguriert, nicht im HTML-Markup-Code.

Wird HTML5 von allen Browsern unterstützt?

Alle wichtigen Browser unterstützen HTML5, d. h. sie können HTML5-Tags interpretieren, die in früheren Versionen von HTML nicht enthalten waren. Allerdings unterstützen nicht alle Browser alle Features von HTML5. Entwickler müssen berücksichtigen, dass einige Nutzer vielleicht eine veraltete Version eines Browsers verwenden, der das HTML5-Videoelement nicht interpretieren kann.

Wie haben Websites vor HTML5 Videoinhalte eingebunden?

Vor der Veröffentlichung von HTML5 im Jahr 2008 wurden Videos meist mit dem Adobe Flash-Plugin eingebettet. HTML5 ermöglichte es Entwicklern, Videos mit nur wenigen HTML-Tags in Webseiten einzubetten, sodass kein Plugin mehr erforderlich war. Infolgedessen wurde Flash immer verzichtbarer, und Adobe stellte die Unterstützung von Flash schließlich am 31. Dezember 2020 ein.

Heute können die meisten Nutzer Videos ohne ein zusätzliches Browser-Plugin streamen. Entwickler können eine Vielzahl von Methoden zum Einbetten von Videos verwenden, ohne sich auf ein Plugin zu verlassen. Das HTML5-Videoelement ist eine der meistgenutzten Methoden dafür.

Was ist ein Browser-Plugin?

Ein Browser-Plugin ist ein Stück Software, das einem Browser ein Feature hinzufügt, das er sonst nicht enthält. Früher konnten Browser keine Videos abspielen. Plugins von Drittanbietern wie Adobe Flash schlossen diese Lücke.

Plugins können jedoch auch eine Sicherheitsbedrohung darstellen. Sie bieten eine weitere Angriffsfläche – eine zusätzliche Möglichkeit für externe Angreifer, eine Browsersitzung zu kompromittieren – zusätzlich zu den Angriffsflächen, die der Browser und die Website bieten. Außerdem können Plugins die Funktionalität der Seite verlangsamen. Der Einsatz von Plugins bedeutet, dass nicht nur eine, sondern mehrere Softwarekomponenten korrekt und schnell arbeiten müssen, um eine Webseite zu laden.

Wenn ein Video nativ eingebettet ist, was in HTML5 möglich ist, lädt es schneller. Außerdem ist es sicherer, wenn Sie auf ein Plugin verzichten.

Wie werden Cloudflare Stream-Videos eingebettet?

Cloudflare Stream ist eine On-Demand-Videoplattform, die Videocodierung, Speicherung, Bereitstellung und Wiedergabe kombiniert. In der Dokumentation zu Cloudflare Stream erfahren Sie, wie Sie Videodateien in Stream hochladen und in Webseiten einbetten können. Oder erfahren Sie mehr über Cloudflare Stream, bevor Sie loslegen.