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.

WebVTT
Filename extension
.vtt
Internet media type
text/vtt
Developed byWorld Wide Web Consortium (W3C)
Initial release10 August 2010 (2010-08-10)[1]
Type of formatTimed text
Extended fromSRT
StandardW3C 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 Support[8][9]
Browser Cue Text TagsCue PositioningCSS 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.

[13]

Other features

In June 2013 an example was added to the specification that included a new "region" setting.[14] This feature is supported since Firefox 59[15] but not in any other browser.[16]

References
  1. "WebSRT". Archived from the original on 2010-08-16. Retrieved 2015-02-12.
  2. "WebVTT versus TTML: XML considered harmful for web captions?". Retrieved 16 February 2015.
  3. WebSRT, from the WHATWG HTML draft specification, retrieved 2010-10-14
  4. Kennedy, Antony; de Leon, Inayaili (2011). Pro CSS for High Traffic Websites. Apress. ISBN 978-1-4302-3288-9.
  5. Pfeiffer, Silvia (June 27, 2011). "Recent developments around WebVTT".
  6. http://www.w3.org/TR/2011/WD-html5-20110113/
  7. "WebVTT cue settings". W3C. Retrieved 11 February 2015.
  8. "WebVTT support in browser". W3C. Retrieved 6 February 2017.
  9. "WebVTT Styling". JWPlayer. Retrieved 6 February 2017.
  10. "Implement the track element".
  11. "Caption File - YouTube Help".
  12. "Firefox 31 Release Notes".
  13. "WebVtt: The Web Video Text Tracks Format". w3.org. The World Wide Web Consortium. 10 May 2018. Retrieved 16 September 2018.
  14. "Added region example to Introduction section under "Other features" – GitHub commit details".
  15. https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API#Notes
  16. https://developer.mozilla.org/en-US/docs/Web/API/VTTCue#Browser_compatibility
This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.