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.