A much-hyped feature of HTML5 is native multimedia. In this session we’ll look at embedding <audio> and <video> into your pages, and how to make it work cross-browser and degrade gracefully in older browsers. Sound too good to be true? It’s not!
We’ll look at the pros and the cons of HTML5 multimedia and see how to write simple controls with JavaScript. Most excitingly, we’ll also look at how HTML5 builds in support for subtitles and captions for multimedia accessibility. And you might pick up a Turkish dancing tip on the way.
---
Edited version of my Web Directions London talk on 26 May 2011. Slides that don't make sense out of context are removed.
2. Anne van Kesteren annevk at opera.com
Wed Feb 28 05:47:56 PST 2007
Hi,
Opera has some internal expiremental builds with an implementation of a <video> element. The element
exposes a simple API (for the moment) much like the Audio() object:
play()
pause()
Stop()
The idea is that it works like <object> except that it has special <video> semantics much like <img> has
image semantics. In markup you could prolly use it as follows:
<figure>
<video src=news-snippet.ogg>
...
</video>
<legend>HTML5 in BBC News</legend>
</figure>
I attached a proposal for the element and as you can see there are still some open issues. The element and
its API are of course open for debate. We're not enforcing this upon the world ;-)
Cheers,
http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2007-February/009702.html
8. video as native object...why is it important?
●
keyboard accessibility built-in
●
“play nice” with rest of the page
●
Simple API for controls
9. "In addition to giving video an HTML
element, we must also agree on a baseline
video format that will be universally
supported, just like the GIF, JPEG and PNG
image format are universally supported. It's
important that the video format we choose
can be supported by a wide range of devices
and that it's royalty-free (RF). RF is a well-
established principle for W3C standards."
http://people.opera.com/howcome/2007/video/
10. Ogg Theora
“free and open”, no licensing/royalties
not many tools for it, not web optimised
18. Help
●
archive.org converts and hosts creative-commons
licensed media
● vid.ly has a free conversion/ hosting service (max 1GB
source file) see vid.ly/5u4h3e
● Miro video converter is a drag and drop GUI skin on
FFMPEG
24. video media queries
<video controls>
<source src=hi-res.ogv media="(min-device-width:800px)">
<source src=lo-res.ogv>
</video>
http://dev.w3.org/html5/spec/video.html#the-source-element
25. Full-screen video
●
Currently, WebkitEnterFullscreen();
●
May 11, WebKit announced it's implementing Gecko API
https://wiki.mozilla.org/Gecko:FullScreenAPI
●
Opera likes this approach, too
27. WebM release does not support subtitles
WHATWG / W3C RFC will release guidance on subtitles and other
overlays in HTML5 <video> in the near future. WebM intends to follow
that guidance.
http://code.google.com/p/webm/issues/detail?id=11
Egg image Kacper "Kangel" Aniołek http://commons.wikimedia.org/wiki/File:Egg.jpg
30. WebVTT formatting
Supports positioning of text
Supports <b> and <i>
Colouring individual speakers
Support vertical text
Supports RTL
Supports ruby annotations
http://www.whatwg.org/specs/web-apps/current-work/webvtt.html
32. Synchronising media elements
Each media element can have a MediaController. A MediaController is an object
that coordinates the playback of multiple media elements, for instance so that a
sign-language interpreter track can be overlaid on a video track, with the two
being kept in sync....
Media elements with a MediaController are said to be slaved to their controller. The
MediaController modifies the playback rate and the playback volume of each of the
media elements slaved to it, and ensures that when any of its slaved media
elements unexpectedly stall, the others are stopped at the same time.
When a media element is slaved to a MediaController, its playback rate is fixed to
that of the other tracks in the same MediaController, and any looping is disabled.
http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#synchronising-
multiple-media-elements
http://www.w3.org/WAI/PF/HTML/wiki/Media_Multitrack_Media_API
33. How mature is all this?
Looping latency
people.opera.com/patrickl/experiments/audio/hacky-looper/
HTML5 video issues on the iPad and how to solve them
blog.millermedeiros.com/2011/03/html5-video-issues-on-the-ipad-and-how-to-solve-them/
Unsolved HTML5 video issues on iOS
http://blog.millermedeiros.com/2011/04/unsolved-html5-video-issues-on-ios/
Audio Sprites (and fixes for iOS)
remysharp.com/2010/12/23/audio-sprites/
34. “...extending the language to better support Web
applications … This puts HTML in direct competition
with other technologies intended for applications deployed
over the Web, in particular Flash and Silverlight.”
Ian Hickson, Editor of HTML5
http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html
35. DRM on HTML5 without changes
Henri Sivonen
lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2010-
July/027051.html
39. Thanks
Mike Taylor @miketaylr for JS help, and Patrick Lauke
@patrick_h_lauke for the Hixie voice. (What does that "H"
stand for?)
Ian Devlin @iandevlin and Silvia Pfeiffer @silviapfeiffer for
webVTT advice
Philip Jägenstedt @foolip and Simon Pieters @zcorpan for
implementing/ QA-ing multimedia in Opera and explaining it
to me slowly and patiently