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:

• write a player that rotates and zooms video (source on GitHub)
• Build your own Indiana Jones style maps (GitHub)
• Put your colleagues in a washing machine
• Simulate a green screen
• Apply CSS3 and SVG filters and transitions to video
• Inject other content into videos
• Stretch a video over the whole screen
• Use video in a 3D environment
• Allow users to take screengrabs of videos (source on GitHub)

..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. Vid.ly 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.