Background Videos als Markenbotschafter im Netz — Funktion, Nutzen und Integration

12. Juni 2015 at 10:27
Animiert_FullScreenVideos_Beitrag03

Fullscreen HTML5 Background Video

 

Ein Bild sagt mehr als 1000 Worte. Was sagt dann erst ein Video? Hintergrund-Videos unterstützen, wenn richtig eingesetzt, den User die Botschaft der eigenen Website noch intensiver erleben zu lassen. Hier finden Sie die wichtigsten Facts rund um die Video-Anwendung und die Nutzung auf Ihrer Website.

Wie aus der Bezeichnung bereits hervorgeht, spielen Hintergrund-Videos im Hintergrund der Website ab. D.h. sie heben Informationen subtil hervor, lenken die Aufmerksamkeit des Users in eine bestimmte Richtung und binden ihn emotional an den Zweck, das Thema der Website. Zwei Beispiele wie solche Videos eingesetzt werden: Airbnb sowie Natural Food & Beverages.

Damit Hintergrund-Videos ein echter Mehrwert für die Website werden, gibt es einiges zu beachten.

Performance:
Für Entwickler, User sowie Website-Betreiber ist die Performance der Website gleichfalls von Bedeutung. Da sich Videos durch ihre Dateigröße stärker auf die Rechenleistung auswirken, ist es wichtig schon bei Videoauswahl beziehungsweise –erstellung diese möglichst gering zu halten.

Ein Video sollte daher am besten zwischen 15 und 30 Sekunden lang sein und bei der Generierung komprimiert werden. Des Weiteren kann an Dateigröße gespart werden, wenn kein Ton verwendet wird. Ohnehin ist Ton für den User oft störend und es sollte, falls doch benötigt, eine Möglichkeit zum Ein- und Ausschalten angeboten werden.

Video Hosting:
Möchte man sich den Schritt der Video-Erstellung ersparen gibt es zahlreiche Plattformen, wie beispielsweise Istockphoto, welche Videos zum Kauf anbieten und die dann auf einem eigenen Server abgelegt werden können. Bei Hostern wie Youtube und Vimeo müssen die Verwendungsrichtlinien beachtet werden. Außerdem muss hier mit der API gearbeitet werden um die Controls zu verstecken und das Branding der Hoster zu verringern.

Einbau:
Das anschließende Einbinden auf der Website kann mit Hilfe von JavaScript-Plug-Ins, wie Vide.js und Backstretch.js erfolgen. Eine weitere simple und dennoch für Hintergrund-Videos völlig ausreichende Möglichkeit ist eine Integration mittels HTML5-Video-Tag und CSS. Hier gelangt man zur  Demo.

Das HTML sieht in dem Fall wie folgt aus:

<video poster="video-poster.jpg" autoplay loop>
       <source src="video.webm" type="video/webm">
       <source src="video.mp4" type="video/mp4">
</video>

Die Verwendung von .webm und .mp4 korrespondiert mit der Einbindung mittels Video-Tag. Der Gebrauch ist rückwirkend bis Internet Explorer 9 gegeben. Für ältere Browser wird ein Fallback-Bild eingebunden. Das Attribut autoplay lässt das Video automatisch abspielen. Loop erstellt eine Endlosschleife. Das Poster-Bild erscheint zuerst und dient der Darstellung, bis das Video selbst vollständig geladen wurde.

Responsive Positionierung:

Um das Video vollflächig und zentriert auf einer responsive Website zu positionieren dient der folgende CSS Code. Der Z-Index positioniert das Bild im Hintergrund.

video {
        position: fixed;
        top: 50%;
        left: 50%;
        width: auto;
        height: auto;
        min-width: 100.5%;
        min-height: 100.5%;
       -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
       -o-transform: translate(-50%, -50%);
       -ms-transform: translate(-50%, -50%);
       transform: translate(-50%, -50%);
       background: url(../img/video-poster.jpg) 0 0 no-repeat;
       background-size: cover;
       z-index: -1;
}

Fallback:
Für ältere Browser sowie für mobile Endgeräte wird ein Fallback-Bild eingebunden. Mittels Feature Detection wird daher überprüft ob der video-Tag vom Browser unterstützt wird.

.no-video body {
                 background: url(../img/video-poster.jpg) center center no-repeat fixed;
                 background-size: cover;
}

.no-video video {
                 display : none;
}

Auch ab einer Breite von 768px wird das Fallback-Bild geladen, da Videos auf mobilen Endgeräten nicht automatisch wiedergegeben werden und es durch unterschiedliche Geschwindigkeiten bei der Datenübertragungen zu langen Ladezeiten und Performance-Einbußen kommen kann. Zusätzlich gibt es die Option mittels Feature Detection zu überprüfen ob es sich um ein Touch-Device handelt.

@media screen and (max-width: 768px) {
       body {
              background: url(video-poster.jpg) center center no-repeat fixed;
       }
       video {
               display: none;
       }
}

Nahe Zukunft:
Da angenommen werden kann, dass die Leistung der Server in Zukunft weiter ansteigen wird, wird die Verwendung von Hintergrund-Videos, nicht zuletzt aus Marketingaspekten, noch mehr an Bedeutung gewinnen. Des Weiteren können wir aus technischer Sicht hoffen, dass die Implementierung von Videos in Internetseiten rasch weiterentwickelt und uns viele neue Anwendungsmöglichkeiten, wie z.B. User-Interaktion oder Gestensteuerung, bringen wird.

Quellen und Weiterführende Links:
Storey, D. (2014). Create Fullscreen HTML5 Page Background Video
Coyier, C. (2012). Rundown of Handling Flexible Media
Zagidullina, A. (2011). Creative Use of Video in Web Design: Background Videos