Lights, Camera, Action! July Dev Derby is all about HTML5 Video!

Show off your coolest video hack in July’s Mozilla Dev Derby!

Moving pictures have always fascinated people. From the first zoetropes to the multi million dollar blockbusters of today – seeing things move grabs our attention as humans much better than any clever copy or imagery could. Video was alien to the web for a long time. Well, not alien, but we needed plugins to make them play. With newer browsers and HTML5, we now have the <video> element to natively embed video in a web page. This allows us to, amongst other things:

  • Style video elements with CSS and SVG
  • Make the video interact with other elements of the document and vice versa
  • Use Canvas to grab frames from videos and manipulate them
  • Create accessible video as the controls can be used with a keyboard without us having to write that functionality

Using this arsenal, you can do pretty cool things. You can:

..and many more things.

Now it is your turn to show us what you can do with HTML5 video! We don’t expect you to build another Wilderness Downtown or 3 Dreams of Black, but we are very excited to offer you the chance to shine in July’s Mozilla Dev Derby.

Why not use CSS3 and Canvas to redesign the Outer Limits intro? Why not make the video do the things Diana Ross talks about in Upside down? Why not build a video cropping tool in Canvas? How about you have a crack at making closed captioning and subtitling work with HTML5 video? There are many ideas floating about – it just needs a bit of drive and a text editor to go for it. So, show us what you can do!

There are a lot of tools out there to make your life easier with HTML5 video. makes it easy to convert videos, Popcorn.js is a library to sync page content and video and there are many tutorials on video available.

To get you into the mood and see some examples in action, we are running an HTML5 video webinar on the 14th of July and you can ask some questions you have upfront using Google Moderator.

Bring the web screen alive, I dare you! I am off to watch Cinema Paradiso again.

About Chris Heilmann

Evangelist for HTML5 and open web. Let's fix this!

More articles by Chris Heilmann…


  1. Brett Gaylor

    Chris – I think the link out to the video dev derby is a bit buried in this post – maybe something more prominent at the top? video ftw!

    July 12th, 2011 at 09:20

    1. Janet Swisher

      Brett, I edited the post to move that link to the lede.

      July 14th, 2011 at 07:52

Comments are closed for this article.