We love side projects. It gives your team a chance to practice building stuff, have some fun, and learn new things. And it’s been said that side projects should be stupid. So here’s one for you:
A few of us around the office were pretty impressed with this Honda ad the other day, and we thought to ourselves, “How’d they do that?” So we decided to see if we could put together a working “prototype” of the basic technology behind it.
We put the whole thing together – shooting both videos, editing them, coding – in a few days of working here and there. (We’re not bragging. On the contrary, it’s more of a warning of how unpolished it is!)
In the Honda video, you can press the “R” key (as in “Type R”) to view The Other Side. In our spoof, you can press the “F” key (Funky? Flipside? You decide) to view the OTHER other side.
Want to know how it works?
We didn’t spend too much time looking at how the people at Honda did it, but we probably landed on a similar solution. Here it goes:
We used the HTML5 video player for both videos, adding our own custom controls – the play button, mute button, and slider/timer (which is a ‘range’ element) – to the top video. After hooking the controls to the top video with some jQuery event listeners, we hooked the bottom video to the same controls (taking the values from the top video and dynamically updating the bottom video with the same values).
We stacked both videos on top of one another, and hid the top one with a jQuery toggle on the “F” key (which then hides, displaying the video underneath). The bottom video loads as “muted,” and then we toggle the muted property on both videos on the “F” key press as well, so that only the video being shown is playing the audio.
The “mute” button really just toggles the volume to 0 and back on both videos (if you toggle the “mute” property on the video with the mute button, then it messes up your top-to-bottom mute toggling).
And that’s pretty much it! You can take it even further: adding a timer, adding a volume slider, shrinking the controls when they’re not in use (like YouTube does, for example), adding a mobile solution (shake to switch videos wouldn’t be too hard, for example). Oh yeah, note that it’s desktop only (we didn’t have time to go mobile! But the Honda solution seems to be desktop-only, too).
