WebVTT
WebVTT (Web Video Text Tracks) is a World Wide Web Consortium (W3C) standard for displaying timed text in connection with the HTML5 <track>
element. The early drafts of its specification were written by WHATWG in 2010 after discussions about what caption format should be supported by HTML5—the main options being the relatively mature, XML-based Timed Text Markup Language (TTML) or an entirely new but more lightweight standard based on the widely-used SubRip format. The final decision was for the new standard, initially called WebSRT (Web Subtitle Resource Tracks).[2] It shared the .srt
file extension and was broadly based on the SubRip format, though not fully compatible with it.[3]
The prospective format was later renamed WebVTT.[4][5] In the January 13, 2011 version of the HTML5 Draft Report], the<track>
tag was introduced and the specification was updated to document WebVTT cue text rendering rules.[6] The WebVTT specification is still in draft stage but the basic features are already supported by all major browsers.
Filename extension |
.vtt |
---|---|
Internet media type |
text/vtt |
Developed by | World Wide Web Consortium (W3C) |
Initial release | 10 August 2010[1] |
Type of format | Timed text |
Extended from | SRT |
Standard | W3C WebVTT |
Open format? | Yes |
Website | (VTT) |
Main differences from SubRip
- WebVTT's first line starts with WEBVTT after the optional UTF-8 byte order mark
- There is space for optional header data between the first line and the first cue
- Timecode fractional values are separated by a full stop instead of a comma
- Timecode hours are optional
- The frame numbering/identification preceding the timecode is optional
- Comments identified by the word NOTE can be added
- Metadata information can be added in a JSON-style format
- Chapter information can be optionally specified
- Only supports extended characters as UTF-8
- CSS in a separate file defined in the companion HTML document for C tags is used instead of the FONT tag
- Cue settings allow the customization of cue positioning on the video[7]
Compatibility
Browser | Cue Text Tags | Cue Positioning | CSS Styling |
---|---|---|---|
Chrome | 35+ | ||
Android stock browser | 5.0+ | ||
Opera | 22+ | ||
Safari | 7+ (iOS: 8+) | ||
Firefox | 31+ (Android: 32+) | N/A | |
Microsoft Edge | 12+ | N/A | |
Internet Explorer | 10+ | N/A |
Firefox implemented WebVTT in its nightly builds (Firefox 24), but initially it was not enabled by default. The feature had to be enabled in Firefox by going to the "about:config" page and setting the value of "media.webvtt.enabled" to true.[10] YouTube began supporting WebVTT in April, 2013.[11] As of July 24, 2014, Mozilla has enabled WebVTT on Firefox by default.[12]
Example of WebVTT format
WEBVTT Kind: captions; Language: en 00:09.000 --> 00:11.000 <v Roger Bingham>We are in New York City 00:11.000 --> 00:13.000 <v Roger Bingham>We are in New York City 00:13.000 --> 00:16.000 <v Roger Bingham>We're actually at the Lucern Hotel, just down the street 00:16.000 --> 00:18.000 <v Roger Bingham>from the American Museum of Natural History 00:18.000 --> 00:20.000 <v Roger Bingham>And with me is Neil deGrasse Tyson 00:20.000 --> 00:22.000 <v Roger Bingham>Astrophysicist, Director of the Hayden Planetarium 00:22.000 --> 00:24.000 <v Roger Bingham>at the AMNH. 00:24.000 --> 00:26.000 <v Roger Bingham>Thank you for walking down here. 00:27.000 --> 00:30.000 <v Roger Bingham>And I want to do a follow-up on the last conversation we did. 00:30.000 --> 00:31.500 align:end size:50% <v Roger Bingham>When we e-mailed— 00:30.500 --> 00:32.500 align:start size:50% <v Neil deGrasse Tyson>Didn't we talk about enough in that conversation? 00:32.000 --> 00:35.500 align:end size:50% <v Roger Bingham>No! No no no no; 'cos 'cos obviously 'cos 00:32.500 --> 00:33.500 align:start size:50% <v Neil deGrasse Tyson><i>Laughs</i> 00:35.500 --> 00:38.000 <v Roger Bingham>You know I'm so excited my glasses are falling off here.
Unsupported features
In June 2013 an example was added to the specification that included a new "region" setting.[14] As of February 2015, however, no player included support for this feature.
References
- "WebSRT". Archived from the original on 2010-08-16. Retrieved 2015-02-12.
- "WebVTT versus TTML: XML considered harmful for web captions?". Retrieved 16 February 2015.
- WebSRT, from the WHATWG HTML draft specification, retrieved 2010-10-14
- Kennedy, Antony; de Leon, Inayaili (2011). Pro CSS for High Traffic Websites. Apress. ISBN 978-1-4302-3288-9.
- Pfeiffer, Silvia (June 27, 2011). "Recent developments around WebVTT".
- http://www.w3.org/TR/2011/WD-html5-20110113/
- "WebVTT cue settings". W3C. Retrieved 11 February 2015.
- "WebVTT support in browser". W3C. Retrieved 6 February 2017.
- "WebVTT Styling". JWPlayer. Retrieved 6 February 2017.
- "Implement the track element".
- "Caption File - YouTube Help".
- "Firefox 31 Release Notes".
- "WebVtt: The Web Video Text Tracks Format". w3.org. The World Wide Web Consortium. 10 May 2018. Retrieved 16 September 2018.
- "Added region example to Introduction section under "Other features" – GitHub commit details".