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.

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

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

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

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

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

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

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

<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>
			

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;
}
			

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

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
			

CSS
::cue:past {
	color: yellow;
} 
::cue:future {
 	text-shadow: black 0 0 1px;
}
				

• WebVTT specification:
  http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#webvtt-0
• WebVTT rendering:
  http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#timed-text-tracks-0
• <track> element:
  http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#the-track-element
• TimedTrack IDL:
  http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#timed-text-tracks