Video streaming at a high level

On behalf of the advertising agency TBWA\ Switzerland AG, we developed a video platform to promote McDonald's nationwide engagement campaign.

The platform targets to a young audience and is designed for mobile devices. Similar to Instagram or TikTok, the videos appear without a visible player and only with the most necessary functions. Users can pause the videos, set them to silent, watch them in full screen and skip them.

In the first three months after go-live, the platform already counted over 2'000h of streamed video time. In the near future, the platform will be enhanced with more great features that will further encourage engagement.

Provided Services
Link to project
mcdonalds-videoplattform
mcdonalds-videoplattform
mcdonalds-videoplattform

A «headless» solution with DatoCMS

For the realisation of the McDonald's video platform, we relied on a headless CMS solution. With this approach, the content of the website (backend) and the view of the website (frontend) are separated from each other.

For the content, we used DatoCMS, a stable and easy-to-use headless content management system. For the frontend, we used Next.js, an open source framework that enables React-based web applications with server-side rendering.

We realised the transmission of the videos with HTTP streaming (HLS). With HLS, the media files are delivered via a conventional web server, which can be used as a simple file server to deliver small parts of the whole file. The files are stored in different quality levels so that the end devices – in this case primarily mobile devices – can change the quality levels depending on the available bandwidth and enable video streaming even with poor reception.

One challenge we encountered during development was browser compatibility. Every browser – especially on mobile devices – has different requirements for videos. For example, the automatic playback of videos on Safari works differently than on Chrome. We also had to develop different solutions for the responsive subtitles for the different browsers.

mcdonalds-videoplattform

Technologies which we use

Technologies which we use