15 Jan 2016
NightRiders, the more you watch the better you see with this innovative video
Webdesign- Drupal- CSS

NightRiders was a single page website, the origin concept came from Fred & Farid. The principle is: we have a video, at first the video is pixelated such as the point that one can not see anything. and the more you see the video, the less she is pixelated.Finally when it reach one million of views the video is clear.

Real time rendering

For contractual reasons, the video had to be hosted on youtube, and the same video need reach one million of views. so we could not upload several videos and change the link after N views. The problematic was how can we get a pixelated style in real time according to views with these limitations ?

Canvas to the rescue

We choose to take advantage of HTML5 canvas component.
Youtube have a nice API but use iframe component : "...the API will insert the 'iframe' tag containing the player." So we had no chance to access directly to the video, but we still had an option: Host the original video (thanks to video components) and with canvas component pixelated it. According to the youtube API documentation "A playback only counts toward a video's official view count if it is initiated via a native play button in the player." To count the view we had no choice to let users click on the youtube native button.

Layering is one of the keys

We have several layers here, is a list from the deepest to the top: Youtube video
Video component layer
Second canvas
Image rendering layer
First canvas
overlays

By playing with these layers, we can get what we want and bypass the limitations. Youtube video layer is just here to count the view, when someone click on the native play button on youtube the canvas mechanic is launch. Youtube layer is no longer displayed, video component plays the hosted video, second canvas gets the video flow and draws it into the image rendering layer, then we catch the image url and apply pixelated effect by drawing into First canvas. We needed two canvas and an image layer to get the right effect. SmoothingEnabled : " The default resizing algorithm can create blurry effects and ruins the beautiful pixels." To set SmoothingEnabled to false we needed to get flow from an image, that's why we needed all these layer.

pixelated effect with canvas

To pixelated the context, we divide size of the video (depending to the number views) and display it with the original width and height, so the more view we get, minus the video will be divided.

Stack, Server and Hosting

Front-end is made with HTML5 / CSS / Javascript (ES5). The server is hosted on Amazon (EC2 server) with NodeJS plateform And use Keymetrics as DevOps tool.. As we said this is a single static page, there is no server side rendering, there is no database and we needed high responsiveness NodeJS is a good choice for this project.

01 Dec 2014
Mediasia Interactive helps Air France passengers attain business class upgrades
01 Apr 2015
Unprecedented new platform brings bright future to mixology