Interaktive Video Landingpage

Das Projekt von Felix zum 2. MyInnovationDay:

Das Thema Video und Interaktion spielt bereits seit mehren Jahren eine wachsende Rolle, gerade wenn es um Produktpräsentationen auf Websites geht. Die größte Hemmschwelle stellt zumeist der bekannte Satz “Ich will das ja auch mal anfassen” dar. Genau an dieser Stelle setzt dieser Gedanke an. Wir als Agentur für Online­Medien verstehen uns dahingehend nicht mit raffinierten Texten oder gut retuschierten Bildern ein Produkt zu vermitteln, sondern vielmehr möchten wir auf recht “fassbare” Art und Weise über ein Produkt sowohl inhaltlich als auch optisch informieren.

Das Produkt "fassbar" machen mit Video, HTML, JavaScript und CSS

Die größte Schwierigkeit stellt bei Videos meistens die Abspielgeschwindigkeit dar. So werden Texte manchmal zu schnell ausgeblendet, bevor man diese zu Ende lesen konnte. Um dieses Manko zu überbrücken, stellt eine gute Lösung das synchroniseren der Abspielgeschwindigkeit mit der Scrollgeschwindigkeit dar. So kann der User die Inhalte in seiner eigenen Geschwindigkeit konsumieren, hat aber auch die Möglichkeit zurückzufahren und Inhalte zu wiederholen.

Um das Produkt fassbar zu machen sind Hotspots unabdingbar: Hier kann der Websitebesucher das Produkt “erkunden” und baut somit eine stärke Bindung auf, anstatt sich nur berieseln zu lassen. 

Das Ergebnis dieser Gedanken kann eine interaktive Landingpage mit Background­Video sein:

Um eine solche Landingpage zu erstellen, benötigt man nicht zwangsläufig Highend- Equipment. Das Wichtigste stellt wie bei jedem Video­Dreh ein Storyboard dar. Gerade bei der gezeigten Sequenz war es wichtig einen fließenden Weg für alle Hotspots zu finden, der am Stück abgespielt werden kann ohne dass dieser geschnitten werden muss. Die Aufnahme wurde mit einer Mittelklasse DLSR und einem Ringblitz erstellt und später getrimmt und in die nötigen HTML5­Videoformate (MP4, OGG und WEBm) konvertiert.

Das fertige Video wird dann mithilfe von JavaScript anhand der Scrollposition synchronisiert. Der restliche Aufbau der Landingpage besteht wie gewohnt aus HTML und CSS. Um Interaktive­Hotspots zu schaffen, kann man sich der Toggle Standartfunktion von jQuery bedienen und so Inhalte wahlweise ein oder ausblenden.

 Insgesamt lässt sich so in weniger als 8h eine interaktive, emtionale Landingpage gestalten, die definitiv länger im Gedächtnis des Kunden bleibt als Standard­ Seiten.