Mehr als nur Bilder – mit einfachen Videos für das Web

Video mit grundlegenden Informationen Interaktionen fördern

Doug Sillars

Sie möchten Ihrer Website Videos hinzufügen? Da Geräte und Netzwerkverbindungen immer schneller und leistungsfähiger werden, können Sie über Bilder hinausgehen und Videos in Ihre Werkzeugkiste für die Erstellung von Websites aufnehmen. Studien zeigen, dass Websites mit Videos zu mehr Interaktionen und Verkäufen führen. Auch wenn Sie Ihren Websites noch keine Videos hinzugefügt haben, ist es wahrscheinlich nur eine Frage der Zeit, bis Sie das tun.

Die Videodateien, die Sie Ihrer Website hinzufügen, sind höchstwahrscheinlich die größten Dateien, die heruntergeladen werden. Aus diesem Grund ist es äußerst wichtig, dass die Dateien für eine schnelle und stabile Wiedergabe für alle Kunden erstellt werden. Obwohl Videos die Interaktion und Kundenzufriedenheit steigern können, kann ein Video, das nicht abgespielt wird oder während der Wiedergabe unterbrochen wird, zu Frustration beim Kunden führen. In diesem Beitrag geht es hauptsächlich um die Verwendung des HTML5-Tags <video> für die Bereitstellung von Videos. Streaming-Videos werden daher nicht behandelt.

Legen wir los!

Das <video>-Tag

Das scheint doch offensichtlich zu sein, oder? Um Videos hinzuzufügen, musst du das Tag <video> einfügen, auf eine Quelle verweisen und schon kann es losgehen.

<video src="myVideo.mp4">

Und Sie haben recht. Das ist alles, was Sie brauchen, um ein Video im Web hinzuzufügen. Es gibt jedoch viele Attribute, die Sie dem Video-Tag hinzufügen können, um das Layout und die Auslieferung des Videos zu verbessern.

Das <source>-Tag

Die beste Möglichkeit, die Bereitstellung von Videos im Web zu verbessern, besteht darin, die Dateien zu optimieren, die an den Browser gesendet werden. Dazu verwenden Sie das Tag <source>:

<video>
  <source src="myWebmVideo.webm" type="video/webm">
  <source src="myh265Video.mp4" type="video/mp4">
  <source src="myh264Video.mp4" type="video/mp4">
</video>

Dies bezieht sich auf drei separate Quelldateien. Der Browser beginnt oben und wählt das erste Format und den ersten Codec aus, die er verwenden kann. Bei Videos kann das Dateiformat, in der Regel als Container bezeichnet, mit verschiedenen Codecs gespeichert werden, die jeweils unterschiedliche Attribute haben. Weitere Informationen finden Sie hier. Im obigen Beispiel ist das WebM-Format (das mit VP8- oder VP9-Codecs codiert werden kann) die erste Wahl. Es wird derzeit von 78 % der Nutzer weltweit unterstützt. Die zweite Option ist der H.265-Codec von MP4, der auf iOS-Geräten und neueren Macs unterstützt wird. Diese Codecs sind neuer und bieten eine verbesserte Datenkomprimierung bei derselben Videoqualität wie ältere Videoformate.

Die letzte Option auf unserer Liste ist H.264 MP4. Dieses Format wird von 92 % aller Nutzer weltweit unterstützt. Es ist jedoch ein älteres Format und daher in der Regel viel größer als WebM- oder H.265-Videos. In einem Beispiel sehen Sie den Unterschied für einen zweiminütigen Film:

Die Bereitstellung von Dateien, die kleiner sind, ist die beste Leistungsoptimierung, die Sie vornehmen können, um Ihre Videos besser zu präsentieren. Wenn ein kleineres Video heruntergeladen wird, beginnt die Videowiedergabe früher und der Video-Cache füllt sich schneller. Das führt zu weniger Rucklern bei der Videowiedergabe. Außerdem wird die Serverlast verringert, was die erhöhten Speicheranforderungen mehrerer Videodateien kompensiert.

Das Attribut „preload“

Die Wiedergabe von Videos kann erst gestartet werden, wenn ein Video heruntergeladen und lokal gespeichert wurde. Mit dem Attribut „preload“ können Sie festlegen, wie viel Video beim Laden der Seite heruntergeladen wird. Es gibt drei Werte für das Attribut „preload“: auto, metadata und none.

preload='auto'

Wenn 'auto' verwendet wird, wird das gesamte Video heruntergeladen, unabhängig davon, ob der Nutzer auf „Wiedergabe“ klickt oder nicht. So wird eine schnelle Videowiedergabe ermöglicht, da das Video lokal heruntergeladen wird, bevor der Nutzer auf „Wiedergabe“ klickt. Aus Sicht der Datennutzung und der Serverauslastung sollte diese Option nur verwendet werden, wenn es sehr wahrscheinlich ist, dass das Video angesehen wird. Andernfalls gehen alle Daten eines vollständigen Videodownloads verloren.

preload='metadata'

Dies ist die Standardeinstellung für das Vorabladen in Chrome und Safari. Wenn 'metadata' verwendet wird, werden die ersten 3 % des Videos heruntergeladen. Auch bei dieser Methode sind einige Einschränkungen zu beachten. Das Herunterladen von nur 3 % des Videos ist jedoch deutlich kostengünstiger als das Herunterladen des gesamten Videos. Außerdem wird ein Teil des Videos lokal gespeichert, damit das Video schnell gestartet werden kann.

preload='none'

Dadurch werden die meisten Daten gespart, aber die Videowiedergabe dauert länger, wenn die Wiedergabetaste gedrückt wird, da laut Einstellung keine Kilobyte des Videos lokal auf dem Gerät vorab geladen werden. Diese Einstellung ist für Videos geeignet, die vorhanden sind, aber wahrscheinlich nicht wiedergegeben werden. Dies kann auch verwendet werden, wenn der Nutzer den Lite-Modus in seinem Browser aktiviert hat.

Poster

Sie können ein Posterbild verwenden, das über dem Videofenster angezeigt wird, bevor die Wiedergabe des Videos beginnt:

<video src="myVideo.mp4" poster="/image/myVideoImage.jpg">

Wenn Sie auf der Seite ein Foto statt eines schwarzen Felds einfügen, wird Ihre Website ansprechender und interaktiver. Mit dem Attribut poster wird jedoch ein Bilddownload hinzugefügt, bevor der Videodownload beginnt. Deshalb solltest du es vermeiden, ein Poster für Videos hinzuzufügen, die automatisch wiedergegeben werden, da der zusätzliche Download den Download verzögert.

Wiedergabesteuerung

Wenn du ein controls-Attribut hinzufügst, werden Wiedergabesteuerelemente hinzugefügt. Ohne diese Schaltflächen können Ihre Kunden Ihr Video nicht starten oder beenden. Sie sollten dies für Videos hinzufügen, damit Nutzer die Wiedergabe stoppen und pausieren, die Lautstärke ändern usw. können. Bei Hintergrund- oder Loop-Videos sollten Sie dieses Attribut weglassen.

stummgeschaltet

Das Attribut muted bewirkt, dass die Wiedergabe stummgeschaltet beginnt. Wenn keine Steuerelemente angegeben werden, bleibt der Ton während der gesamten Wiedergabe stummgeschaltet. Wenn das beabsichtigt ist, kann es sinnvoll sein, den Audiotrack aus dem Video zu entfernen. Dadurch wird die Größe der Videodatei, die an den Kunden gesendet wird, weiter reduziert.

Wie bei Containern und Codecs wird auch das Entfernen der Audiodatei, auch Demultiplexierung genannt, in diesem Artikel nicht behandelt. Eine Anleitung findest du in der Kurzübersicht zu Medienmanipulation.

Schleife

Wenn Sie ein Video mit einem Endlos-Loop (wie ein animiertes GIF) ausliefern möchten, fügen Sie das Attribut loop hinzu. Da Videodateien in der Regel viel kleiner als animierte GIFs sind, kannst du mit diesem Mechanismus die GIFs durch Videodateien ersetzen.

Automatische Videowiedergabe

Wenn das Video sofort wiedergegeben werden soll (z. B. als Hintergrundvideo oder als Video, das wie ein animiertes GIF in einer Schleife abgespielt wird), können Sie das Attribut autoplay hinzufügen:

<video src="myVideo.mp4" playsinline autoplay>

Damit ein Video in mobilen Browsern automatisch wiedergegeben wird, muss jedoch auch das muted-Attribut hinzugefügt werden:

<video src="myVideo.mp4" playsinline autoplay muted>

Fazit

Wenn Sie Ihrer Website einfach ein Video hinzufügen, können Sie die Interaktionen mit Ihren Kunden steigern. Es ist jedoch wichtig, dass Sie die Inhalte richtig präsentieren und dafür sorgen, dass die Wiedergabe des Videos reibungslos und ohne Ruckler erfolgt. Mithilfe der integrierten Attribute des <video>-Tags können Sie allen Besuchern Ihrer Website ein fehlerfreies Videomaterial bereitstellen.