The WebVTT format

The  W3C Web Media Text Tracks Community Group is working on the “WebVTT: The Web Video Text Tracks Format” specification, a format used for defining files that will contain text for captions and subtitles, and much more… The WebVTT files are used with the src attribute of the <track> element, that can be used inside a <video>…</video>.

In the example presented in the previous section (located at http://jsbin.com/luyazi/2/edit), we used a file called sintel-captions.vtt:

  1. <video height=“272” width=“640”
  2.        poster=http://content.bitsontherun.com/thumbs/q1fx20VZ-640.jpg&#8221;
  3.        crossorigin=“anonymous”
  4.        controls>
  5.    …
  6.    <track src=http://demo.jwplayer.com/html5-report/sintel-captions.vtt
  7.           kind=“captions” label=“Closed Captions” default>
  8. </video>

And here is an extract of the corresponding sintel-captions.vtt file:

  1. WEBVTT
  2. 00:00:01.000 –> 00:00:02.042
  3. (drumbeat)
  4. 00:00:07.167 –> 00:00:12.025
  5. (plaintive violin solo playing)
  6. 00:00:15.000 –> 00:00:18.183
  7. (wind whistling)
  8. 00:00:24.167 –> 00:00:27.025
  9. (orchestra music swells)
  10. 00:00:43.033 –> 00:00:43.192
  11. (weapons clash)
  12. 00:00:44.000 –> 00:00:44.175
  13. (gasps)
  14. 00:00:44.183 –> 00:00:45.158
  15. (grunts)
  16. 00:00:45.167 –> 00:00:47.058
  17. (groaning)
  18. 00:00:54.192 –> 00:00:55.150
  19. (blade rings)
  20. 00:00:55.158 –> 00:00:57.008
  21. (bellowing)
  22. 00:00:57.017 –> 00:00:58.067
  23. (grunting)
  24. 00:00:59.075 –> 00:01:00.133
  25. (panting)
  26. 00:01:05.108 –> 00:01:06.125
  27. (cries out in agony)
  28. 00:01:08.050 –> 00:01:09.058
  29. (panting)
  30. 00:01:12.092 –> 00:01:13.142
  31. (panting)
  32. 00:01:14.017 –> 00:01:18.125
  33. (orchestra plays ominous low notes)
  34. 00:01:31.058 –> 00:01:35.133
  35. (plaintive violin solo returns)
  36. 00:01:46.158 –> 00:01:49.058
  37. This blade has a dark past.
  38. 00:01:51.092 –> 00:01:54.108
  39. It has shed much innocent blood.
  40. 00:01:57.083 –> 00:02:00.000
  41. You‘re a fool for traveling alone
  42. so completely unprepared.
  43. 00:02:01.100 –> 00:02:03.033
  44. You’re lucky your blood‘s still flowing.
  45. 00:02:04.183 –> 00:02:06.075
  46. Thank you.

Each “element” in this file has a starting and ending time, plus a value (the text that will be displayed), followed by a blank line (blank lines are separators between elements).

Each element is called “a cue”, and may optionally have an ID that will be useful when using the track element JavaScript API, in particular the getCueById() method of TextTrack objects. How to use these will be taught in the “advanced HTML5” course, soon on W3Cx

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s