Video Streaming auf hohem Niveau
Im Auftrag der Werbeagentur TBWA\ Switzerland AG entwickelten wir eine Videoplattform zur Bewerbung der schweizweiten Engagement-Kampagne von für McDonald's.
Die Plattform spricht eine junge Zielgruppe an und ist auf mobile Endgeräte ausgelegt. Ähnlich wie auf Instagram oder TikTok erscheinen die Videos ohne sichtbaren Player und nur mit den nötigsten Funktionen. Die Users können die Videos pausieren, auf lautlos stellen, im Fullscreen anschauen und überspringen.
In den ersten drei Monaten nach Go-live zählte die Plattform bereits über 2'000h gestreamte Videozeit. In naher Zukunft soll die Seite mit weiteren tollen Features ergänzt werden, die das Engagement noch weiter fördern.
Eine «kopflose» Lösung mit DatoCMS
Für die Umsetzung der McDonald's Videoplattform setzten wir auf eine Headless-CMS-Lösung. Bei diesem Ansatz sind die Inhalte der Webseite (Backend) und die Ansicht der Webseite (Frontend) voneinander getrennt.
Für den Inhalt (Content) nutzten wir DatoCMS, ein stabiles und bedienungsfreundliches headless Content-Management-System. Für das Frontend setzten wir Next.js ein, ein Open-Source-Framework, das React-basierte Webanwendungen mit serverseitigem Rendering ermöglicht.
Die Übertragung der Videos realisierten wir mit HTTP-Streaming (HLS). Mit HLS werden die Media-Dateien über einen konventionellen Webserver ausgeliefert, der als einfacher Dateiserver zur Auslieferung kleiner Teilstücke der gesamten Datei genutzt werden kann. Die Dateien werden dabei in unterschiedlichen Qualitätsstufen abgelegt, so dass die Endgeräte – wie in diesem Fall in erster Linie Mobilgeräte – je nach verfügbarer Bandbreite die Qualitätsstufen wechseln und auch bei schlechtem Empfang ein Video-Streaming ermöglichen können.
Eine Herausforderung, die uns während der Entwicklung begegnete, war die Browserkompatibilität. Jeder Browser – insbesondere auf Mobilgeräten – stellt andere Anforderungen an Videos. So funktioniert die automatische Wiedergabe von Videos auf Safari anders als auf Chrome. Auch für die responsiven Untertitel mussten wir unterschiedliche Lösungen für die verschiedenen Browser entwickeln.
Technologien, die wir verwenden
Technologien, die wir verwenden
