HTML5 Rocks

HTML5 Rocks

HTML5 Features

Multimedia

Audio and Video became first-class citizens on the Web with HTML5 the same way that other media types like images did in the past. Through their new APIs you can access, control and manipulate timeline data and network states of the files. With the coming additions to the APIs you will be able to read and write raw data to audio files (Audio Data API) or manipulate captions in videos (Timed Track API). But the real power of these new HTML elements stands out when they are combined with the other technologies of the web stack, be it Canvas, SVG, CSS or even WebGL.

For instance, you can build a DJ mixer table app where you show several controls to fade and mix audio tracks. Canvas lets you read pixel data from videos so you could add a video visualizer with a scene selection feature and, on top of that, use SVG filters á la Photoshop to distort the movie while the videos are playing.

What’s New

Demos

HTML5 Studio: Picture-in-picture Video Swap
Craftymind: Blowing Up HTML5 Video

In the Wild

Extension FM Music Library
HTML5 on Youtube

Resources

  • W3C Spec: Audio Element This W3C specification defines the audio element with all the available methods, attributes and events.
  • W3C Spec: Video Element This W3C specification defines the video element with all the available methods, attributes and events.
  • W3C Spec: Media Elements This W3C specification defines those methods and properties which are common to both audio and video elements.
  • WhatWG: Timed Track API A subset of the media element spec currently being written where it defines means to handle metadata of audio/video files such as captions and subtitles.
  • Mozilla Wiki: Audio Data API Draft recommendation for Audio Data API where methods are defined to read and write spectrum data of audio files.