Preflight

Google Chrome
At this stage, you will need to use Google Chrome 23+ to see all of the functionality in this presentation.
Opera
At this stage, you will need to use Opera Next to see the caption functionality in this presentation. This presentation has only been tested using Google Chrome. You should still be able to navigate the slides by using left/right arrow keys, but will currently see display errors and only some of the demos will work.
Opera
At this stage, you will need to use IE 10 to see the caption functionality in this presentation. This presentation has only been tested using Google Chrome. You should still be able to navigate the slides by using left/right arrow keys, but will currently see display errors and only some of the demos will work.
Mozilla
You are running a Mozilla browser. While such browsers generally have excellent support for HTML5 features, the main feature of this presentation is about TextTracks and Mozilla browsers do not support this feature yet. This is presentation has only been tested using Google Chrome. You should still be able to navigate the slides by using left/right arrow keys, but will currently see display errors and none of the demos will work.
Other browser
You are running a browser that has not been tested with this presentation. This presentation has been developed for Google Chrome. You may not be able to run some or all of the samples listed here.
TextTrack API: supported
TextTrack API: not supported
Your browser does not support the TextTrack API.
If things look good, press → to move on.
Welcome! (This field is for presenter notes and commentary.)
Press:
  • Space or ← / → to move around
  • Ctrl/Command / – or + to zoom in and out if slides don’t fit
  • N to show/hide speaker notes
  • H to highlight important elements in code snippets

WebVTT and Video Accessibility

Lightning Talk

Silvia Pfeiffer
Web Directions South
19th October 2012
Slide Template by HTML5 WOW
Today's Focus
  • Captions / Subtitles
  • Chapters
  • Video Descriptions
  • ... without JavaScript!
two deaf children signing blind elderly woman with guide dog
A simple WebVTT File
WEBVTT

1
0:00:15.000 --> 0:00:17.951
At the left we can see...

2
0:00:18.166 --> 0:00:20.083
At the right we can see the...

3
0:00:20.119 --> 0:00:21.962
...the head-snarlers

4
0:00:21.999 --> 0:00:24.368
Everything is safe.
Perfectly safe.
The <track> Element
<video poster="video.png" src="video.webm" controls>

  <track kind="captions"     srclang="en-US" src="video_cc_en.vtt"
                                                            default>

  <track kind="subtitles"    srclang="de-DE" src="video_sub_de.vtt">

  <track kind="chapters"     srclang="en-US" src="video_nav_en.vtt">

  <track kind="descriptions" srclang="en-US" src="video_desc_en.vtt">

</video>

Captions & Subtitles

Positioned Captions in WebVTT
WEBVTT

0:00:15.000 --> 0:00:17.951 align:start position:0%
At the left we can see...

0:00:18.166 --> 0:00:20.083 align:end position:100%
At the right we can see the...

0:00:20.119 --> 0:00:21.962 line:0%
...the head-snarlers

safe
0:00:21.999 --> 0:00:24.368 line:5
Everything is safe.
Perfectly safe.
Putting it together: Captions in Browsers
<video poster="videos/elephant.high.png" controls>
  <source src="videos/elephant.mp4#t=14" type="video/mp4">
  <source src="videos/elephant.webm#t=14" type="video/webm">
  <track kind="captions" srclang="en-US" src="videos/elephant_cc1.vtt">
</video>

Chapters / Navigation

A WebVTT File of Chapters
WEBVTT

3
0:03:04.142 --> 0:09:00.957
Digital vs. Analog

4
0:09:00.957 --> 0:15:58.248
Digital

4.1
0:09:00.957 --> 0:09:33.698
Overview

4.2
0:09:33.698 --> 0:11:18.010
Sample Rate
    
<video controls>
  <source src="monty.mp4" type="video/mp4">
  <source src="monty.web" type="video/webm">
  <track kind="chapters" srclang="en-US"
         src="monty_chapters.vtt">
</video>
Chapters with JavaScript
The TextTrack JavaScript API
interface HTMLMediaElement : HTMLElement {
  ...
  readonly attribute TextTrackList textTracks;
};
interface TextTrackList : EventTarget {
  readonly attribute unsigned long length;
  getter TextTrack (unsigned long index);
  ...
};
interface TextTrack : EventTarget {
  readonly attribute DOMString kind;
  readonly attribute DOMString label;
  readonly attribute DOMString language;
  readonly attribute TextTrackCueList? cues;
  readonly attribute TextTrackCueList? activeCues;
 ...
};

Video Descriptions

A WebVTT File of Descriptions
WEBVTT

00:00:01.000 --> 00:00:04.000
Mist hangs over snow-capped
mountains.

00:00:05.000 --> 00:00:08.000
Our view weaves among the
craggy peaks.

00:00:09.000 --> 00:00:16.000
The Blender Foundation presents
the Durian Open Movie Project
    
<video controls>
<source src="sintel.mp4" type="video/mp4">
<source src="sintel.web" type="video/webm">
<track kind="descriptions" srclang="en-US"
       src="sintel_desc.vtt">
</video>
Voicing of Video Descriptions
Voicing by: Chrome Audio Description Extension.

Other uses for WebVTT

(by Longtail Video)

Make the world a better place!

Silvia Pfeiffer

blog.gingertech.net
silviapfeiffer1@gmail.com
@silviapfeiffer

Slides: http://html5videoguide.net/presentations/WebDirSouth2012/