WebVTT in HTML5

Silvia Pfeiffer

Web and TV Workshop, Hollywood, Sept 2011

1
What is WebVTT?

Video time-synchronized text

  • Captions and Subtitles
  • Descriptions
  • Chapters for navigation
  • Metadata
2
Markup: The <track> element

<video src="video.webm" poster="poster.png" controls width="50%">

<track kind="captions" src="capions.vtt" srclang="en">

<track kind="descriptions" src="desccription.vtt" srclang="en">

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

</video>

3
Captions/Subtitles Example

Thanks to Marlee Matlin's company, "Solo One", for permission to use this video for caption demonstrations. Thanks to Chris Giffard for his Captionator.js polyfill.

4
Descriptions Example

Thanks to the Blender Foundation for the Creative Commons licensed "Elephants Dream" movie.

5
Chapter Example
6
Metadata Example

Apple Demo at WWDC 2011

Keyframes in WebVTT cues

Session 502: Advanced HTML5 Media Controllers

7
Levels of Support for Formats
  • Across browsers: WebVTT
  • Select browsers: select formats
  • JavaScript: any format
8