HTML5 multimediaAccessibilityBruce Lawson
Anne van Kesteren annevk at opera.comWed Feb 28 05:47:56 PST 2007Hi,Opera has some internal expiremental builds with an im...
<object width="425" height="344">  <param name="movie"value="http://www.example.com/v/9sEI1AUFJKw&hl=en&fs=1&"></param>  <...
<video src=pudding.webm  controls  autoplay  poster=poster.jpg  width=320 height=240>    <a href=video.webm>Download movie...
<audio src=bieber.ogg  controls  autoplay>     <a href=bieber.ogg>Download horrid pap</a></audio>
<video src=pudding.webm loop>
<audio   src=bieber.ogg   preload><audio   src=bieber.ogg   preload=auto><audio   src=bieber.ogg   preload=none><audio   s...
video as native object...why is it important?●    keyboard accessibility built-in●    “play nice” with rest of the page●  ...
"In addition to giving video an HTMLelement, we must also agree on a baselinevideo format that will be universallysupporte...
video formats               webM            Ogg/ Theora    mp4/ h264Opera            yes               yesChrome          ...
audio formats          mp3       Ogg/ Vobis   wavOpera                  yes       yesChrome     yes         yesFirefox    ...
Giving everybody video<video controls autoplay poster=… width=… height=…>  <source src=pudding.mp4 type=video/mp4>  <sourc...
<video controls poster="…" width="…" height="…">   <source src="movie.mp4" type="video/mp4" />   <source src="movie.webm" ...
powerful (simple) API
www.w3.org/TR/html5/video.html#media-elements
controlling <video> with JavaScriptvar v = document.getElementByTagName(video)[0];v.play();v.pause();v.volume = … ;v.curre...
events fired by <video>var v = document.getElementById(player);v.addEventListener(loadeddata, function() { … }, true)v.add...
<video> accessibility
WebM release does not support subtitlesWHATWG / W3C RFC will release guidance on subtitles and otheroverlays in HTML5 <vid...
<track> element<video controls poster=… width=… height=…>    <source src=movie.webm type=video/webm>    <track src=subtitl...
●   1 Adobe Encore              ●   18 MicroDVD (.sub*)                    ●   36 Subsonic●   2 AQTitle (.aqt)            ...
webVTTWEBVTT FILE101:23:45,678 --> 01:23:46,789Hello world!201:23:48,910 --> 01:23:49,101HelloWorld!
WebVTT formatting Supports positioning of text   Supports <b> and <i>Colouring individual speakers    Support vertical tex...
<track> polyfillhttp://www.delphiki.com/html5/playr/
Synchronising media elementsEach media element can have a MediaController. A MediaController is an objectthat coordinates ...
getUserMedia API(previously known as "HTML5 <device>")
<video autoplay></video><script>var video = document.querySelector(video);If (navigator.getUserMedia){navigator.getUserMed...
my.opera.com/core/blog/2011/03/23/webcam-orientation-preview
HTML5 Multimedia Accessibility
HTML5 Multimedia Accessibility
HTML5 Multimedia Accessibility
Upcoming SlideShare
Loading in …5
×

HTML5 Multimedia Accessibility

3,110
-1

Published on

A brief rollerskate along HTML5 multimedia beach, in which we pop into the soda shop of subtitling and the ice-cream parlour of synchronised media, before we incongruously pop into the igloo of JavaScript access to the camera (because I pulled in from slides from another presso after we talked about it in an earlier presentation).

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,110
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
19
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

HTML5 Multimedia Accessibility

  1. 1. HTML5 multimediaAccessibilityBruce Lawson
  2. 2. Anne van Kesteren annevk at opera.comWed Feb 28 05:47:56 PST 2007Hi,Opera has some internal expiremental builds with an implementation of a <video> element. The elementexposes 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> hasimage 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 andits API are of course open for debate. Were not enforcing this upon the world ;-)Cheers, http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2007-February/009702.html
  3. 3. <object width="425" height="344"> <param name="movie"value="http://www.example.com/v/9sEI1AUFJKw&hl=en&fs=1&"></param> <param name="allowFullScreen"value="true"></param> <param name="allowscriptaccess"value="always"></param> <embedsrc="http://www.example.com/v/9sEI1AUFJKw&hl=en&fs=1&" type="application/x-shockwave-flash"allowscriptaccess="always" allowfullscreen="true"width="425" height="344"></embed></object>
  4. 4. <video src=pudding.webm controls autoplay poster=poster.jpg width=320 height=240> <a href=video.webm>Download movie</a></video>
  5. 5. <audio src=bieber.ogg controls autoplay> <a href=bieber.ogg>Download horrid pap</a></audio>
  6. 6. <video src=pudding.webm loop>
  7. 7. <audio src=bieber.ogg preload><audio src=bieber.ogg preload=auto><audio src=bieber.ogg preload=none><audio src=bieber.ogg preload=metadata>
  8. 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. 9. "In addition to giving video an HTMLelement, we must also agree on a baselinevideo format that will be universallysupported, just like the GIF, JPEG and PNGimage format are universally supported. Itsimportant that the video format we choosecan be supported by a wide range of devicesand that its royalty-free (RF). RF is a well-established principle for W3C standards." http://people.opera.com/howcome/2007/video/
  10. 10. video formats webM Ogg/ Theora mp4/ h264Opera yes yesChrome yes yes Nope (Chrome.soon)Firefox Yes (FF4) yesSafari yesIE9 Yes (if installed) yes
  11. 11. audio formats mp3 Ogg/ Vobis wavOpera yes yesChrome yes yesFirefox yes yesSafari yes yesIE9 yes yes
  12. 12. Giving everybody video<video controls autoplay poster=… width=… height=…> <source src=pudding.mp4 type=video/mp4> <source src=pudding.webm type=video/webm> <source src=pudding.ogv type=video/ogg> <!-- fallback content --></video>
  13. 13. <video controls poster="…" width="…" height="…"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.webm" type="video/webm" /> <source src="movie.ogv" type="video/ogg" /> <object width="…" height="…" type="application/x-shockwave-flash" data="player.swf"> <param name="movie" value="player.swf" /> <param name="flashvars" value=" … file=movie.mp4" /> <!-- fallback content --> </object></video> still include fallback for old browsers http://camendesign.com/code/video_for_everybody
  14. 14. powerful (simple) API
  15. 15. www.w3.org/TR/html5/video.html#media-elements
  16. 16. controlling <video> with JavaScriptvar v = document.getElementByTagName(video)[0];v.play();v.pause();v.volume = … ;v.currentTime = … ;…
  17. 17. events fired by <video>var v = document.getElementById(player);v.addEventListener(loadeddata, function() { … }, true)v.addEventListener(play, function() { … }, true)v.addEventListener(pause, function() { … }, true)v.addEventListener(timeupdate, function() { … }, true)v.addEventListener(ended, function() { … }, true)…
  18. 18. <video> accessibility
  19. 19. WebM release does not support subtitlesWHATWG / W3C RFC will release guidance on subtitles and otheroverlays in HTML5 <video> in the near future. WebM intends to followthat 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
  20. 20. <track> element<video controls poster=… width=… height=…> <source src=movie.webm type=video/webm> <track src=subtitles-en.vtt kind=subtitles srclang=en> <track src=subtitles-de.vtt kind=subtitles srclang=de> <!-- fallback content --></video>http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#the-track-element
  21. 21. ● 1 Adobe Encore ● 18 MicroDVD (.sub*) ● 36 Subsonic● 2 AQTitle (.aqt) ● 19 MPEG-4 Timed Text (.ttxt) ● 37 smilText● 3 ARIB STD-B24 ● 20 MPL (.mpl) ● 38 SubStation Alpha (.ssa)● 4 AYA (.aya) ● 21 MPSub (.sub*) ● 39 SubViewer (.sub*)● 5 CA (.ca) ● 22 Ogg Writ ● 40 TIT (.tit)● 6 CHK (.chk) ● 23 Phoenix Subtitle (.pjs) ● 41 TitleVision TV2003 text format● 7 CIN (.cin) ● 24 PowerDivX (.psb) ● 42 TTML● 8 CIP (.cip) ● 25 PU2000 (.rac, .pac) ● 43 Turbotitler● 9 DKS (.dks) ● 26 RealText (.rt) ● 44 ULT (.ult)● 10 DVD Studio Pro ● 27 SAMI (.smi) ● 45 Universal Subtitle Format (.usf)● 11 EBU STL (.ebu) ● 28 Scantitling format 890 (.890) ● 46 VPlayer● 12 FAB Subtitler ★ ● 29 Screen Poliscript ● 47 WinCaps (.w32)● 13 Gloss Subtitle (.gsub) ● 30 Softel SwiftXIF (.xif) ● 48 XombieSub● 14 JACOSub (.jss) ● 31 Sonic Solutions DVD text format ● 49 ZeroG (.zeg)● 15 Kate ● 32 Spruce STL ● 50 CVD● 16 L32 (.l32) ● 33 ST4, ST7 (.st4, .st7) ● 51 DVB subtitles● 17 MacSUB ● 34 Structured Subtitle Format (.ssf) ● 52 Philips DVD subtitling format ● 35 SubRip (.srt) ★ ● 53 VobSub (.sub and .idx), XSUB (DivX subtitles) ● 55 CMML, SMIL,
  22. 22. webVTTWEBVTT FILE101:23:45,678 --> 01:23:46,789Hello world!201:23:48,910 --> 01:23:49,101HelloWorld!
  23. 23. WebVTT formatting Supports positioning of text Supports <b> and <i>Colouring individual speakers Support vertical text Supports RTL Supports ruby annotations
  24. 24. <track> polyfillhttp://www.delphiki.com/html5/playr/
  25. 25. Synchronising media elementsEach media element can have a MediaController. A MediaController is an objectthat coordinates the playback of multiple media elements, for instance so that asign-language interpreter track can be overlaid on a video track, with the twobeing kept in sync....Media elements with a MediaController are said to be slaved to their controller. TheMediaController modifies the playback rate and the playback volume of each of themedia elements slaved to it, and ensures that when any of its slaved mediaelements unexpectedly stall, the others are stopped at the same time.When a media element is slaved to a MediaController, its playback rate is fixed tothat 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
  26. 26. getUserMedia API(previously known as "HTML5 <device>")
  27. 27. <video autoplay></video><script>var video = document.querySelector(video);If (navigator.getUserMedia){navigator.getUserMedia(video,successCallback,errorCallback);function successCallback(stream) { video.src = stream; }...</script>
  28. 28. my.opera.com/core/blog/2011/03/23/webcam-orientation-preview
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×