Taking HTML5 video a step further
Upcoming SlideShare
Loading in...5
×
 

Taking HTML5 video a step further

on

  • 23,736 views

A talk I gave at Web Directions South 2009 about the current possibilities of the HTML5 video element, and its shortfalls in accessibility. Also briefly mentions audio and media fragment URIs. Takes a ...

A talk I gave at Web Directions South 2009 about the current possibilities of the HTML5 video element, and its shortfalls in accessibility. Also briefly mentions audio and media fragment URIs. Takes a broad sweep at accessibility and usability features of HTML5 media elements.

Statistics

Views

Total Views
23,736
Views on SlideShare
14,987
Embed Views
8,749

Actions

Likes
8
Downloads
179
Comments
0

34 Embeds 8,749

http://www.jroller.com 7275
http://www.webdirections.org 424
http://blog.gingertech.net 320
http://jroller.com 196
http://thisamericanscholar.com 158
http://info2jd.blogspot.in 107
http://www.slideshare.net 82
http://local.inxero.com 45
http://eblonvia.jroller.com 45
http://info2jd.blogspot.com 37
http://info2jd.blogspot.sg 13
http://translate.googleusercontent.com 8
http://info2jd.blogspot.de 6
http://info2jd.blogspot.com.es 3
http://info2jd.blogspot.se 3
http://info2jd.blogspot.ca 3
http://info2jd.blogspot.fr 3
http://info2jd.blogspot.kr 2
http://info2jd.blogspot.com.br 2
http://info2jd.blogspot.mx 2
http://webcache.googleusercontent.com 2
http://info2jd.blogspot.no 1
http://info2jd.blogspot.be 1
http://info2jd.blogspot.it 1
http://info2jd.blogspot.nl 1
http://info2jd.blogspot.co.at 1
http://info2jd.blogspot.co.uk 1
http://fiveholiday55.blogspot.com&_=1372109553862 HTTP 1
http://info2jd.blogspot.jp 1
http://info2jd.blogspot.ro 1
http://info2jd.blogspot.co.il 1
http://ftp.jroller.com 1
http://static.slidesharecdn.com 1
http://info2jd.blogspot.com.au 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Taking HTML5 video a step further Taking HTML5 video a step further Presentation Transcript

  • Taking HTML5 <video> a step furtherSilvia PfeifferMozilla / W3C / Xiph /Annodex / Vquence
  • Storyboard» Capabilities of <video>» Aspects of video usability and accessibility» Designing solutions
  • Capabilities of <video>
  • <video> is simple, sexy<video src="elephants_dream.ogv" poster="elephants_dream.png" controls></video>
  • Compare to Flash<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8- 444553540000" codebase="http://download.macromedia.com/p ub/shockwave/cabs/flash/swflash.cab#version=6, 0,40,0" WIDTH="550" HEIGHT="400" id="myMovieName"><PARAM NAME=movie VALUE="myFlashMovie.swf"><EMBED href="myFlashMovie.swf" WIDTH="550" HEIGHT="400" NAME="myMovieName" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/ getflashplayer"></EMBED></OBJECT>
  • Video and CSShttp://www.zachstronaut.com/lab/isocube.html.left { -webkit-transform: rotate(15deg) skew(15deg, 15deg); -moz-transform: rotate(15deg) skew(15deg, 15deg);}
  • Video, Canvas, CSS + jshttps://developer.mozilla.org/samples /video/chroma-key/index.xhtml#c2 { background-image: url(foo.png); background-repeat: no-repeat;}
  • Video and Face Detectionhttp://hacks.mozilla.org/2009/06/conn ecting-html5-video/comment-page- 1/1:16m : twitter and video2:00m : face recognitionFull-screen
  • Dynamic Content Injectionhttp://people.mozilla.com/~prouget/demo s/DynamicContentInjection/play.xhtml<canvas id="mirrorVideo"/><svg id="playButton" xmlns="http://www.w3.org/2000/svg" width="100" height="100"> <path d="M 40 70 L 70 50 L 40 30"/> <circle cx="50" cy="50" r="40" onclick="processor.playVideo()"/></svg>
  • Video in SVGhttp://www.double.co.nz/video_test/video. svg<foreignObject> <div xmlns="http://www.w3.org/1999/xhtml"> <video src="myvideo.ogg"/> </div></foreignObject>
  • Video and Physicshttp://people.mozilla.com/~blizzard/l aunch/Javascript and video for the win!
  • Aspects ofVideo Usability
  • Keyboard Control» @controls  space bar  →/←  CTRL + → / ←  HOME + → / ←  ↑ / ↓ on volume button» Exposure to screen readers
  • Deep Access to Videohttp://www.annodex.net/~silvia/itext/ mediafrag.html#t=30Media Fragment URIs:• Time offset browser bar• Time offset <video> @src
  • Aspects ofVideo Accessability
  • Screen Reader ARIA» @aria-label<video class="v" src="elephant.ogv" poster="elephant.png” controls aria-label="Elephants Dream video" title="Elephants Dream video"></video>
  • Sign Languagehttp://www.ehow.com/video_4403510_sign -language-movies.htmlSigning by humanshttp://www.vcom3d.com/vault_files/forest_asl/Or by avatars in the future
  • Audio Descriptionshttp://www.youtube.com/watch?gl= AU&hl=en-GB&v=i2VXp0s0BLwSpoken by a human
  • What can be done with text
  • Captions / Subtitles / Audio DescriptionsIntro videohttp://localhost/~silvia/mozilla/itext/w ebjam.html
  • Other time-aligned text» Lyrics» Karaoke» Ticker Text» Annotations/active regions» Transcripts» Linguistic markup» Timed Metadata
  • Advantages» Search engines» Cross-site use» Linking between videos» Advertising -> Monetisation
  • A structured approach:out-of-band text
  • SRT example100:00:15,000 --> 00:00:17,951At the left we can see...200:00:18,166 --> 00:00:20,083At the right we can see the...300:00:20,119 --> 00:00:21,962...the head-snarlers
  • LRC example[ti:Lets Twist Again][ar:Chubby Checker oppure Beatles, The][au:Written by Kal Mann / Dave Appell, 1961][al:Hits Of The 60s - Vol. 2 – Oldies][00:12.00]Lyrics beginning ...[00:15.30]Some more lyrics ...
  • Text Abstraction» Start time» End time» Text» Onenter event» Onleave event» [Styling]» [Hyperlink]https://wiki.mozilla.org/Accessibility/HTML5_ captions_v2
  • Associate with <video><video src="elephants_dream.ogv controls> <itextlist category=”SUB"> <itext src=”subtitle_en.srt" lang="en"/> <itext src=”subtitle_de.srt" lang="de"/> <itext src=”subtitle_fr.srt" lang="fr"/> <itext src=”subtitle_jp.srt" lang="jp"/> </itextlist></video>
  • Capabilities itextlist» API:  @category @onenter  @active @onleave  @name» Default display in menu in audio/video controls» Default styling for categories
  • Capabilities itext» API:  @src @charset  @lang @delay  @type @stretch» JavaScript API:  currentText  allText  langName» Default choice by browser language
  • Actual Exampleshttp://www.annodex.net/~silvia/itext/SubtitlesCaptionsChapter MarkersTextual Audio DescriptionsLyricsStyling
  • A structuredapproach: in-line text
  • Multitrack video» Video:  Sign language» Audio:  Dubbed tracks  Audio descriptions» Text:  Captions / subtitles / etc
  • Aim» Identical Interface» JavaScript» CSS» Media-format
  • State of Affairs
  • Implementations» JavaScript prototype  Firefox 3.5 / Chromium / Safari 4.03 / Opera 9.62» Firefox  Keyboard control   Deep linking ()  Out-of-band patch  In-line patch
  • Standardisation» WHATWG discussions» W3C discussions  HTML  WAI-XTECH» In-principle Google, Opera» 1st November, Stanford Uni, W3C Workshop on Video A11y
  • Silvia Pfeiffersilvia.pfeiffer1@gmail.comhttp://blog.gingertech.netTwiter: @silviapfeiffer