Look what I can do with HTML5, Javascript and WebM/Theora!

var myVideo = document.getElementById('caffeine'); if (typeof myVideo.loop == 'boolean') { // loop supported myVideo.loop = true; } else { // loop property not supported myVideo.addEventListener('ended', function () { this.currentTime = 0; this.play(); }, false); } //No need to set autoplay in the tag myVideo.play();

Mmmmmmmm! Coffee!

Actually, it’s an animated caffeine molecule. No gif here! This is HTML5 and a snippit of Javascript in action, and it was quite easy to make it work. And I can even tab to it and controll it with a screen reader. The hardest part was the fallback links to download the browsers that support it, because I had to find each link individually. :) I did, however, choose to implement only free and open formats for the animation. The original avi file is available from The Department of Chemistry, University of the West Indies.

It is also rather interesting to note that Firefox doesn’t support the “loop” attribute in the video tag, so I had to copy and paste a Javascript snippit into this post to make it loop properly. Otherwise, this would have been even easier to implement than it actually was. But it was still quite easy, since I only had to Google, copy and paste. I’ve also saved this script code so I can reuse it whenever I want.

BTW, a big thankyou goes out to Tumblr for allowing me to use HTML5 and Javascript in my posts. You guys rock!