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

Grundlagen von Videos Interaktionen steigern.

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. Videos können die Interaktion und Kundenzufriedenheit steigern. Wenn ein Video jedoch nicht abgespielt wird oder während der Wiedergabe hängt, kann das zu Frustration bei den 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

Klingt logisch, oder? Wenn du ein Video hinzufügen möchtest, musst du das Tag <video> hinzufügen und auf eine Quelle verweisen.

<video src="myVideo.mp4">

Und Sie haben Recht. Das ist im Grunde alles, was Sie tun müssen, um ein Video in das Web einzufü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. Im folgenden Beispiel siehst du den Unterschied bei einem zweiminütigen Film:

Codec Dateigröße
VP8 5,5 MB
VP9 4,2 MB
H.265 5,4 MB
H.264 16,1 MB

Die Übermittlung kleinerer Dateien ist die beste Leistungsoptimierung, die du vornehmen kannst, um deine Videos besser bereitzustellen. 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 sich das Video ansehen wird. Andernfalls gehen alle Daten eines vollständigen Videodownloads verloren.

preload='metadata'

Das ist die Standardeinstellung für das Vorladen 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.'auto'

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 vor Beginn der Videowiedergabe über dem Videofenster angezeigt wird:

<video src="myVideo.mp4" poster="/image/myVideoImage.jpg">
Bei einem Video ohne Poster wird vor dem Start ein schwarzer Bildschirm angezeigt.
Kein Posterbild

Bei einem Video ohne Poster wird vor dem Start ein schwarzer Bildschirm angezeigt.

Ein Video mit einem Poster ist viel ansprechender.
Mit einem Posterbild

Ein Video mit einem Poster ist viel ansprechender.

Wenn Sie auf der Seite ein Foto statt eines schwarzen Felds einfügen, wird Ihre Website ansprechender und interaktiver. Wenn du das Attribut poster verwendest, wird vor dem Videodownload ein Bilddownload gestartet. Aus diesem Grund solltest du bei Videos, die automatisch wiedergegeben werden, kein Poster hinzufügen, da der zusätzliche Download den Videodownload 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 bereitgestellt werden, bleibt der Ton während der gesamten Wiedergabe stummgeschaltet. Wenn das beabsichtigt ist, solltest du den Audiotrack aus dem Video 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, können Sie mit diesem Mechanismus Ihre GIFs durch Videodateien ersetzen.

Automatische Videowiedergabe

Wenn Ihr 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. Mit den integrierten Attributen des <video>-Tags können Sie allen Besuchern Ihrer Website fehlerfreie Videos präsentieren.