To get rid of the nasty sparetime i created a little fun experiment that uses HTML5 <video> + <canvas> and some CSS3 transforms to perform some interesting transition / slicing effects on video elements. It only works in webkit based Browsers i.e. Apple Safari and Google Chrome. Below is a link to the demo and a really short howto explaining the technique behind it.
Watch the demo first.
Howto
The code is pretty simple and straightforward. In essence you need a video tag to play the video, some canvas elements that act as your video slices and finally some css transforms to animate the canvas elements.
Video
HTML5 <video> makes playing videos (nearly) as simple as displaying an image on your website. The only thing slightly problematic is the codec support in different browsers. To satisfy all class A browsers, you would need at least three videos with different encodings (ogg, webm, h.264), but as these demo only covers webkit, at least ogg is not needed.
To embed the video you can use something like this:
<video id="video" loop autoplay controls style="display:none">
<source src="trailer_480p.m4v" type="video/mp4">
<source src="trailer_480p.webm" type="video/webm">
</video>
This defines a video element with some additional parameters: The source tags define the video files in different encodings, the loop, autoplay and controls attributes should be self explanatory.
To encode videos in h.264 i simply use handbrake, Miro Video Converter does a good job at creating WebM videos. Both tools are available for free.
Javascript
The javascript code is not that complicated either. In essence you just need to update some canvas elements with the video content periodically. This is simply done by rendering the video to the canvas element. The code is really straightforward:
var canvas1 = document.getElementById('canvas1')[0];
var ctx1 = canvas1.getContext('2d');
// ... repeat for remaining canvas elements
var video = document.getElementsByTagName('video')[0];
video.addEventListener('play', function() {
setInterval(function() {
ctx1.drawImage(video, 0,0, 854, 480);
// ... repeat for remaining canvas elements
}, 33); }, false);
A possible speedup could be achived by rendering the video to a single large hidden canvas element an render this to the visible elements. Still I did not bother to test the speed improvements for this small example.
CSS3
As slices of the video are rendered to different canvas by now, you can use standard css3 transformation effect on them. To get at least minimal speed on mobile browsers, you should always use 3d transforms instead for their 2d counterparts as those are hardware accelerated e.g. translate3d(10px,10px,0px) instead of translate(10px, 10px). More details on CSS3 transforms can be found here.
The Movie
Last but not least: the excelent open source movie used for this demo is of course Big Buck Bunny (c) copyright 2008, Blender Foundation. A truly amazing achievement of the open source community.
