Médecins du Monde · Names not numbers

Names not numbers
My role Lead Developer
Date release 15 Mar 2014
Client Médecins du Monde
Agency B-REEL
Website https://singuerinc-b-reel.gitlab.io/org.names-not-numbers.www/en_int/
More info http://www.b-reelfilms.com/projects/digital/case/577/medecins-du-monde/
Tech html5 · javascript · php · aws

This website/experience has one thing: a video.

A video that must be in synchronization on each single frame.

The name that you see on the card is one of the four hundred png images that should be overlaid in the video.

Every time the video starts we pick one of those images. Then we put it on top of the video and we sync in order to create the illusion that we have a unique video for each name.

I have used a technique which I explain more in depth in my blog.
TL;DR Basically you have to encode the frame number in binary code in your video using black and white pixels. Using the requestAnimationFrame() function and drawing the video on a canvas you can extract those pixels and transform them in numbers.

Below is the video that we use as base.
Check it on the website to see the final result.