Loading...

This presentation is an HTML5 website -
the slide design is from http://www.html5rocks.com/

Press key to advance.

Having issues seeing the presentation? Read the disclaimer

Slides controls, press:

  • and to move around.
  • Ctrl/Command and + or - to zoom in and out if slides don’t fit.
  • T to change the theme.
  • H to toggle syntax highlight.

HTML5 video accessibility

and the WebVTT file format

March 23, 2011 - Silvia Pfeiffer

Requirements of a
Web Text Format

  • Captions / Subtitles
  • Text Video Descriptions
  • Navigation / Chapters
  • Metadata

WebVTT (Video Text Tracks)

WEBVTT

1
00:00:13.000 --> 00:00:16.100
I heard about this arduino project, and I saw it online - 

2
00:00:16.100 --> 00:00:20.100
- and I said 'Wow! a lot of people are starting to talk about this.
I should check it out!'
			

WebVTT formatted subtitles

WEBVTT

1
00:00:13.000 --> 00:00:016.100
Ich hörte von dieser <c.red.caps>arduino</c> Projekt, und ich sah es online -

2
00:00:16.100 --> 00:00:20.100
- und ich sagte "<b>Wow!</b> eine Menge Leute fangen an, darüber zu reden.
Ich <i>check it out</i>!"
			

WebVTT for i18n

WEBVTT

00:00:15.042 --> 00:00:18.042 D:vertical A:start
<ruby>左<rt>ひだり</rt></ruby>に<ruby> 見<rt>み</rt></ruby>えるのは…
 
00:00:18.750 --> 00:00:20.333 D:vertical A:start
<ruby>右<rt>みぎ</rt></ruby>に<ruby> 見<rt>み</rt></ruby>えるのは…
 
00:00:20.417 --> 00:00:21.917 D:vertical A:start
..…首刈り機
 
00:00:22.000 --> 00:00:24.625 D:vertical A:start
すべて安全|完璧に安全だ
			
  • UTF-8 character encoding
  • ruby text
  • vertical / horizontal rendering
  • alignment

WebVTT caption positioning

WEBVTT

00:00:05.000 --> 00:00:08.040 A:middle L:10%
I dabble? Listen to me. What a jerk.

00:00:05.000 --> 00:00:08.040 A:middle L:60%
Yeah, I sort of dabble around,
you know.
			
  • L: line position
  • T: text position
  • A: alignment

WebVTT speaker semantics

WEBVTT

00:00:05.000 --> 00:00:08.040 A:middle T:10%
<v.Beatrix>Ahem...

00:00:05.000 --> 00:00:08.040 A:middle T:80%
<v.Arthur>What's the matter?
			

WebVTT text descriptions

WEBVTT

1
00:00:00.000 --> 00:00:05.000
The orange open movie project presents

2
00:00:05.010 --> 00:0:12.000
Introductory titles are showing on the background of a water pool with fishes
swimming and mechanical objects lying on a stone floor.

3
00:00:12.010 --> 00:00:14.800
title: elephants dream
			

Text read out by screen reader

WebVTT chapters for navigation

chapter-1
00:00:00.000 --> 00:00:18.000
Introductory Titles

chapter-2
00:00:18.001 --> 00:01:10.000
The Jack Plugs

chapter-3
00:01:10.001 --> 00:02:30.000
Robotic Birds
			

Navigation markers

Text Tracks in HTML5

<video controls>
  <source src="video.mp4"  type="video/mp4">
  <source src="video.webm" type="video/webm">


  <track label="English Captions"     kind="captions"     srclang="en"
                                                          src="video_cc_en.vtt">


  <track label="German Subtitles"     kind="subtitles"    srclang="de"
                                                          src="video_sub_de.vtt">

  <track label="French Subtitles"     kind="subtitles"    srclang="fr"
                                                          src="video_sub_fr.vtt">


  <track label="English Descriptions" kind="descriptions" srclang="en"
                                                          src="video_audesc_en.vtt">


  <track label="Chapters"             kind="chapters"     srclang="en"
                                                          src="video_chapters_en.vtt">
</video>
			

Using CSS for richer styling

WEBVTT

1
00:00:13.000 --> 00:00:16.100
I heard about this <c.arduino>arduino</c> project, and I saw it online - 

2
00:00:16.100 --> 00:00:20.100
- and I said 'Wow! a lot of people are starting to talk about this.
I should check it out!'
			

::cue pseudo-element

CSS
::cue .arduino {
        color: red;
        text-transform: uppercase;
        font-family: "Helvetica Neue";
        font-weight: lighter;
}
			

WebVTT default rendering

  • pop-on: bottom third of video viewport, centered
  • roll-up: overlapping cues are added underneath

Exotic: paint-on captions

WEBVTT

1
00:00:10.000 --> 00:00:12.210
<00:00:10.035>Chocolate <00:00:11.000>Rain
 
2
00:00:12.210 --> 00:00:15.910
<00:00:13.250>Some <00:00:13.500>stay <00:00:13.750>dry <00:00:14.25>and 
<00:00:14.50>others <00:00:15.00>feel <00:00:15.25>the <00:00:15.50>pain
 
3
00:00:15.910 --> 00:00:15.920
<00:00:16.000>Chocolate <00:00:16.500>Rain
			
  • cue timestamps
  • character resolution possible
  • styling through CSS pseudo-selectors
    :past, :future (e.g. Karaoke)
CSS
::cue:past {
	color: yellow;
} 
::cue:future {
 	text-shadow: black 0 0 1px;
}
				

WebVTT

A bridge between broadcast and the Web

  • Full features of CEA 608 captions
  • Simplicity of Editing
  • Ability to apply Web styling
  • Open and freely available