As part of our university outreach programme, a few Mozilla people and volunteers went to Boston last week to give a series of lectures on web technologies for games development.

During the week we covered topics like WebGL for 3D development, basics of JavaScript, debugging and performance, canvas development, offline development and local storage and multimedia on the web. We’ll make these slides available in the comments to this blog post.

The slides of the multimedia talk are available here:

The topics covered were:

• Quick history of Multimedia on the web
• Annoyances with Flash
• HTML5 audio and video
• Codecs and conversion
• Embedding video and audio
• Controlling video
• Transforming video
• Making realtime changes
• Awesome new audio possibilities

We showed and explained a few demos like:

• The Media events demo page at the W3C web site
• The Spirit of Indiana demo syncing a Google Maps animation with a video
• Transforming Video to create a player that allows you to zoom inside a video and rotate it using CSS transformations
• Paul Rouget’s round video demo showing how to create a play/pause button in SVG, greyscale a video and rotate it using CSS transformations
• Paul’s Video Mashup demo showing how to apply SVG filters like Gaussian Blur, masking and how to apply CSS transforms to a running video
• Remy Sharp’s round video demo showing how to create a rotating, bouncing circle that contains a video
• Paul Rouget’s Green demo showing how to simulate a green screen effect with open web technologies.
• The dynamic content injection demo showing how to embed content into a video after analysing it for injection hotspots.
• The Tracker demo showing how to detect human shapes and movement in a video
• The edge detection demo shows how to detect edges in a live video using JavaScript
• The HTML5 Guitar Tab generator
• The sfxr sound effect library

I also provided extensive notes for the whole talk with code examples on my own blog.