Grundlegendes Video kennenlernen. Interaktionen steigern
Möchten Sie Ihrer Website Videos hinzufügen? Da Geräte und Netzwerkverbindungen schneller und leistungsstärker geworden sind, können Sie sich nicht nur mit Bildern, sondern auch mit Videos befassen, um das Web zu erstellen. Studien belegen, dass Websites mit Videos zu mehr Interaktionen und mehr Umsatz führen. Selbst wenn Sie Ihren Websites noch keine Videos hinzugefügt haben, ist es wahrscheinlich nur eine Frage der Zeit.
Die Videodateien, die Sie Ihrer Website hinzufügen, sind wahrscheinlich die größten heruntergeladenen Dateien. Aus diesem Grund ist es äußerst wichtig, dass die Dateien allen Nutzern eine schnelle und stetige Wiedergabe ermöglichen.
Videos können zwar die Interaktion und die Kundenzufriedenheit steigern, aber ein Video, das während der Wiedergabe nicht abgespielt wird oder stockt, kann zu Frustration bei den Kunden führen.
In diesem Beitrag geht es vorrangig um die Verwendung des HTML5-Tags <video> zur Bereitstellung von Videos. Streamingvideos werden hier nicht behandelt.
Legen wir los!
Das <video>-Tag
Das scheint mir offensichtlich zu sein, oder? Um ein Video hinzuzufügen, musst du das <video>-Tag einfügen und auf eine Quelle verweisen – und schon gehts los.
<video src="myVideo.mp4">
Und du hast recht. Auf der obersten Ebene brauchen Sie nichts weiter, um ein Video im Web hinzuzufügen. Es gibt jedoch viele Attribute, die Sie zum Video-Tag hinzufügen können, um das Layout und die Auslieferung des Videos zu verbessern.
Das <source>-Tag
Die vielleicht beste Möglichkeit zur Verbesserung der Bereitstellung von Videos im Web 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>
Diese verweist auf drei separate Quelldateien. Der Browser startet oben und wählt das erste Format und den ersten Codec aus. Bei Videos kann das Dateiformat, das in der Regel als Container bezeichnet wird, mit verschiedenen Codecs gespeichert werden, die jeweils unterschiedliche Attribute haben. Weitere Informationen Im Beispiel oben ist die erste Wahl das WebM-Format, das mit VP8- oder VP9-Codecs codiert werden kann und zum Zeitpunkt der Erstellung dieses Dokuments von 78% der globalen Nutzer unterstützt wird. Die zweite ist der H.265-Codec von mp4, der unter iOS und neueren Macs unterstützt wird. Diese Codecs sind neuer und haben eine verbesserte Datenkomprimierung und dieselbe Videoqualität wie ältere Videoformate.
Die letzte Wahl auf unserer Liste ist H.264 MP4, das 92% aller weltweiten Nutzer unterstützt, aber ein älteres Format ist und daher im Allgemeinen viel größer als WebM- oder H.265-Videos ist. In einem Beispiel sehen Sie 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 |
Mit kleineren Dateien lässt sich die Leistung deiner Videos am besten optimieren. Wenn ein kleineres Video heruntergeladen wird, erfolgt die Wiedergabe früher und der Zwischenspeicher füllt sich schneller. Dies führt zu weniger Unterbrechungen während der Videowiedergabe. Außerdem wird die Serverlast verringert, was den erhöhten Speicherbedarf mehrerer Videodateien ausgleicht.
Das Attribut „preload“
Die Wiedergabe von Videos kann erst gestartet werden, wenn einige Videos heruntergeladen und lokal gespeichert wurden. Mit dem Attribut „preload“ können Sie steuern, wie viele Videos beim Seitenaufbau heruntergeladen werden. Es gibt drei Werte für das Preload-Attribut: auto, metadata und none.
preload='auto'
Bei Verwendung von 'auto' wird das gesamte Video heruntergeladen, unabhängig davon, ob der Nutzer auf die Wiedergabeschaltfläche klickt oder nicht. Dadurch wird eine schnelle Videowiedergabe ermöglicht, da das Video lokal heruntergeladen wird, bevor der Nutzer auf die Wiedergabe klickt. Im Hinblick auf Datennutzung (und Serverlast) sollte dies nur verwendet werden, wenn es sehr wahrscheinlich ist, dass das Video angesehen wird. Andernfalls werden alle Daten eines vollständigen Videodownloads verschwendet.
preload='metadata'
Dies ist die Standardeinstellung für das Vorabladen in Chrome und Safari. Bei Verwendung von 'metadata' werden die ersten 3% des Videos heruntergeladen. Dies weist zwar Einschränkungen gegenüber 'auto' auf, aber nur 3% des Videos verursachen deutlich geringere Server-/Datennutzungskosten als das gesamte Video. Gleichzeitig wird ein Teil des Videos lokal gespeichert, um einen schnellen Videostart zu ermöglichen.
preload='none'
Dadurch werden die meisten Daten gespart, das Video startet jedoch beim Klicken auf die Wiedergabe langsamer, da gemäß der Einstellung null Kilobyte des Videos lokal auf dem Gerät vorab geladen werden. Für Videos, die zwar vorhanden, aber nicht abgespielt werden, ist diese Einstellung die richtige Einstellung. Diese Option kann auch verwendet werden, wenn der Nutzer im Browser den Lite-Modus aktiviert hat.
Poster
Wir empfehlen Ihnen, ein Posterbild zu haben, das über dem Videofenster angezeigt wird, bevor die Wiedergabe des Videos beginnt:
<video src="myVideo.mp4" poster="/image/myVideoImage.jpg">
Bei einem Video ohne Poster ist vor dem Start ein schwarzer Bildschirm zu sehen.
Ein Video mit einem Poster ist viel ansprechender.
Wenn Sie ein Foto anstelle eines schwarzen Felds auf der Seite einfügen, gestalten Sie Ihre Website ansprechender und interaktiver. Mit dem Attribut poster wird jedoch vor Beginn des Videodownloads ein Bilddownload hinzugefügt. Aus diesem Grund empfiehlt es sich, bei automatisch wiedergegebenen Videos kein Poster hinzuzufügen, da der zusätzliche Download den Download des Videos verzögert.
Wiedergabesteuerung
Durch das Hinzufügen eines controls-Attributs werden Wiedergabesteuerungen hinzugefügt. Andernfalls können Ihre Kunden
das Video nicht starten oder beenden. Sie sollten dies für Videos hinzufügen, damit Nutzer
das Video anhalten und pausieren oder die Lautstärke ändern können. Bei Hintergrund- oder Schleifenvideos können Sie dieses Attribut weglassen.
stummgeschaltet
Das Attribut muted bewirkt, dass die Wiedergabe ohne Ton beginnt. Wenn keine Steuerelemente verfügbar sind, bleibt das Mikrofon während der gesamten Wiedergabe stummgeschaltet. In diesem Fall kann es sinnvoll sein, den Audiotrack aus dem Video zu entfernen. Dadurch verringert sich die Größe der Videodatei, die an den Kunden geliefert wird.
Wie bei Containern und Codecs wird das Entfernen der Audiodatei, auch als Demuxing bezeichnet, auch den Rahmen dieses Artikels sprengen. Eine Anleitung dazu finden Sie im Spickzettel zur Medienmanipulation.
Schlaufe
Füge das Attribut loop hinzu, um ein Video auszuliefern, das den Inhalt als Schleife wiederholt (z. B. ein animiertes GIF). 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 du möchtest, dass dein Video sofort abgespielt wird, z. B. als Hintergrundvideo oder als Video, das wie ein animiertes GIF in Schleife wiedergegeben wird, kannst du das Attribut autoplay hinzufügen:
<video src="myVideo.mp4" autoplay>
Damit ein Video in mobilen Browsern automatisch wiedergegeben werden kann, muss jedoch auch das Attribut muted hinzugefügt werden:
<video src="myVideo.mp4" autoplay muted>
Fazit
Wenn Sie Ihrer Website einfach ein Video hinzufügen, schaffen Sie einen neuen Bereich der Interaktion für Ihre Kunden. Es ist jedoch wichtig, dass Sie die Inhalte richtig bereitstellen, damit die Wiedergabe des Videos reibungslos und ohne Unterbrechungen erfolgt. Mithilfe der integrierten Attribute des <video>-Tags können Sie allen Besuchern Ihrer Website ein hochwertiges Video bieten.