|My role||Lead Developer|
|Date release||March 15, 2014|
|Client||Médecins du Monde|
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 placed in top of the video.
Every time the video starts we pick one of those 400 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 the 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 into numbers.
Below is the video that we used as base:
Check it on the website to see the final result.