HTML5 media elements and accessibility

Dr Silvia Pfeiffer

Vquence Pty Ltd, Xiph.Org

Overview


Current state with video on the Web

Future state with video on the Web

  • no plugins
  • less sources of bugs
  • uniform API
  • simple markup
  • baseline codec
[any material that should appear in print but not on the slide]

Markup


<video src='video.ogv' controls>Fallback</video>

<audio src='audio.ogv' controls>Fallback</video>

Further attributes:

Markup: multiple alternative sources


http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html 

  <video controls>
    <source src="video.ogv" type="video/ogg">
    <source src="video.mp4" type="video/mp4">
    Fallback
  </video>

Further attributes:

JavaScript API


  media . currentSrc
  media . load()
  media . play()
  media . pause()
  media . canPlayType(type)
  media . duration
  media . currentTime [= value]
  media . startTime
  media . readyState

Example:

<script type="text/javascript">
  video = document.getElementsByTagName("video")[0];
  video.currentSrc = "video2.ogv";
  video.load();
</script>

Demos

Video & CSS


Video & SVG


Video & Canvas

More Demos

Video & Web Worker Threads & Canvas

http://hacks.mozilla.org/2009/06/connecting-html5-video/

Video & Synchronous Data Display in Canvas

http://people.mozilla.org/~blizzard/launch/

Accessibility

Hard-of-Hearing


Vision-Impaired


Foreigners

Current Hacks

Subtitles


Chapters & Captions


Animated Lyrics with SVG


Integrated Proposal: has textual audio descriptions, captions, subtitles, chapters, lyrics

Technology Requirements

Multitrack Media JavaScript API (Proposal)

http://www.w3.org/WAI/PF/HTML/wiki/Media_MultitrackAPI 

  interface MediaTrack {
    readonly attribute DOMString name;
    readonly attribute DOMString role;
    readonly attribute DOMString type;
    readonly attribute DOMString media;
    readonly attribute DOMString language;
             attribute boolean enabled;
  };
  interface HTMLMediaElement : HTMLElement {
    ...
    readonly attribute MediaTracks tracks;
    ...
  };

Proposed Roles

http://www.w3.org/WAI/PF/HTML/wiki/Media_MultitrackAPI

Text tracks:

"caption", "subtitle", "textaudiodesc", "karaoke",
"chapters", "tickertext", "lyrics"

Video tracks:

"main", "alternate" (e.g. different camera angle),
"sign" (for sign language)

Audio tracks:

"main", "alternate" (probably linked to an alternate video track),
"dub", "audiodesc", "music", "sfx" (sound effects)

External text tracks (Proposal)

http://www.w3.org/WAI/PF/HTML/wiki/Media_TextAssociations 

  interface HTMLTrackElement : HTMLElement {
            attribute DOMString src;
            attribute DOMString name;
            attribute DOMString role;
            attribute DOMString type;
            attribute DOMString media;
            attribute DOMString language;
            attribute boolean   enabled;
     };

Example Markup

http://www.w3.org/WAI/PF/HTML/wiki/Media_TextAssociations 

<video src="video.ogg">
  <track src="video_cc.dfxp" type="application/ttaf+xml"
      language="en" role="caption"></track>
  <track src="video_tad.srt" type="text/srt" language="en" 
      role="textaudesc"></track>
  <trackgroup role="subtitle">
    <track src="video_sub_en.srt" type="text/srt; charset='Windows-1252'"
       language="en"></track>
    <track src="video_sub_de.srt" type="text/srt; charset='ISO-8859-1'"
       language="de"></track>
    <track src="video_sub_ja.srt" type="text/srt; charset='EUC-JP'"
       language="ja"></track>
  </track>
</video>

Next Steps

[any material that should appear in print but not on the slide]

Questions?


Contact: Dr Silvia Pfeiffer

Email: silviapfeiffer1@gmail.com

Twitter: silviapfeiffer

Blog: http://blog.gingertech.net/