HTML5 and Timed Media

Video and Audio Without the Plugin

Video Demo

BBC

Audio Demo

El Ten Eleven : Hot Cakes

What and Why

• video, audio, text
• standard set of interfaces to provide
  • native support
  • styling
  • increase accessibility
  • uniform behavior
• Interact with other page elements: canvas, svg

Characteristics – It’s dynamic!

• multiple streams rendered together: video + audio
• large files, loaded overtime
• variety of protocols with different subsets of support
• multiple states: playing, ready to play, stopped, loading, etc.
• properties change with protocol: dimension, size, duration

Syntax

• Video Attributes: https://developer.mozilla.org/en/html/element/video
• Audio Attributes: https://developer.mozilla.org/en/html/element/audio
• Video html and events: https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox
• Firefox interface: https://developer.mozilla.org/en/nsIDOMHTMLMediaElement

Video in the Web

• W3C effort to promote video and audio online
  1. Timed Text Working Group: xml to describe text
  2. Media Fragments Working Group: uri's to link to specific spot in video/audio
  3. Media Annotations Working Group: metadata
• Missing codec? Patents.
• http://www.w3.org/2008/WebVideo/

Can we use it?

• Still draft. Done in 2022?
• Browsers vary in support
• Codec mess
  • Currently Firefox .ogg and .wav +
  • Currently Safari .mov and .mp3 +
• Flash has more audio features
• Sound Manager 2: JS interface for Flash

Examples

• Dynamic Content Injections
• SVG
• Canvas Manipulation
• Video Captioning
• Sprite Synth
• Compare to a Flash audio visualization

Thank you!

• These slides are online: http://html5.waytoocrowded.com
• http://webkit.org/blog/140/html5-media-support/
• http://webkit.org/specs/HTML_Timed_Media_Elements.html
• http://my.opera.com/ODIN/blog/video-on-the-web
• http://www.w3.org/TR/2006/CR-ttaf1-dfxp-20061116/
• http://www.whatwg.org/specs/web-apps/current-work/#video
• https://developer.mozilla.org/en/html/element/video
• https://developer.mozilla.org/En/HTML/Element/Audio
• https://developer.mozilla.org/en/nsIDOMHTMLMediaElement
• https://developer.mozilla.org/En/Manipulating_video_using_canvas
• https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox
• http://people.mozilla.com/~prouget/demos/round/index.xhtml
• http://blog.mozbox.org/post/2009/04/12/Firefox-35%3A-a-new-experiment-with-Canvas-Video
• Colors: April Showers
• Slideshow: S5
• Video: BBC
• Audio: El Ten Eleven : Hot Cakes