Jump to content

WebVTT: Difference between revisions

From Wikipedia, the free encyclopedia
Browse history interactively
← Previous edit
Content deleted Content added
VisualWikitext
→Compatibility: {{yes}}, {{n/a}} (should probably be {{no}} if sources were provided), merged rows, merged cells
m Reverted 1 edit by 151.237.58.75 (talk) to last revision by Pomagai
 
(44 intermediate revisions by 32 users not shown)
Line 1: Line 1:
{{Short description|File format}}
{{Infobox file format
{{Infobox file format
| name = WebVTT
| name = WebVTT
⚫
| icon =
| screenshot =
| extension = .vtt
| extension = .vtt
| mime = text/vtt
| mime = text/vtt
| developer = [[World Wide Web Consortium|W3C]]
| developer = [[World Wide Web Consortium]] (W3C)
| released = {{start date and age|2010|08|10|df=yes}}<ref>{{cite web |url=http://www.whatwg.org/specs/web-apps/current-work/websrt.html|archiveurl=https://web.archive.org/web/20100816054522/http://www.whatwg.org/specs/web-apps/current-work/websrt.html|title=WebSRT|archivedate=2010-08-16|accessdate=2015-02-12}}</ref>
| released = {{start date and age|2010|08|10|df=yes}}<ref>{{cite web |url=http://www.whatwg.org/specs/web-apps/current-work/websrt.html|archiveurl=https://web.archive.org/web/20100816054522/http://www.whatwg.org/specs/web-apps/current-work/websrt.html|title=WebSRT|archivedate=2010-08-16|accessdate=2015-02-12}}</ref>
| latest_release_date = {{start date and age|2015|01|31|df=yes}}
| latest_release_version = {{start date and age|2019|04|04|df=yes}}
| genre = [[Timed text]]
| genre = [[Timed text]]
| extended_from = [[SubRip|SRT]]
| extended_from = [[SubRip|SRT]]
| standard = [http://dev.w3.org/html5/webvtt/ W3C WebVTT]
| standard = [https://www.w3.org/TR/webvtt1/ W3C WebVTT]
⚫
| open = Yes
| free = Yes
| free = Yes
| url =
}}
}}
'''WebVTT''' (Web Video Text Tracks) is a [[World Wide Web Consortium|W3C]] standard for displaying [[timed text]] in connection with the [[HTML5]] <code>&lt;track&gt;</code> 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 popular [[SubRip|SRT]] format. The final decision was for the new standard, initially called '''WebSRT''' (Web Subtitle Resource Tracks).<ref>{{cite web
'''WebVTT''' (Web Video Text Tracks) is a [[World Wide Web Consortium]] (W3C) standard for displaying [[timed text]] in connection with the [[HTML5]] <code>&lt;track&gt;</code> element.
The early drafts of its specification were written by the [[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).<ref>{{cite web
|url=http://www.balisage.net/Proceedings/vol10/html/Tai01/BalisageVol10-Tai01.html
|url=http://www.balisage.net/Proceedings/vol10/html/Tai01/BalisageVol10-Tai01.html
|title=WebVTT versus TTML: XML considered harmful for web captions?
|title=WebVTT versus TTML: XML considered harmful for web captions?
|accessdate=16 February 2015
|accessdate=16 February 2015
}}</ref> It shared the <code>.srt</code> file extension and was "broadly <!-- see Talk #2--> based on" (parts of) <!-- see Talk #3 --> the SubRip format, though not fully compatible with it.<ref>[http://www.whatwg.org/specs/web-apps/current-work/websrt.html WebSRT], from the WHATWG HTML draft specification, retrieved 2010-10-14</ref><!-- sources for whole paragraph -->
}}</ref> It shared the <code>.srt</code> file extension and was broadly based on the SubRip format, though not fully compatible with it.<ref>[http://www.whatwg.org/specs/web-apps/current-work/websrt.html WebSRT], from the WHATWG HTML draft specification, retrieved 2010-10-14</ref><!-- sources for whole paragraph -->
The prospective format was later renamed WebVTT.<ref>{{cite book
The prospective format was later renamed WebVTT.<ref>{{cite book
|url=https://books.google.com/books?id=9A6w3ZBDtysC&pg=PA168#v=onepage&f=false
|url=https://books.google.com/books?id=9A6w3ZBDtysC&pg=PA168
|title=Pro CSS for High Traffic Websites
|title=Pro CSS for High Traffic Websites
|first=Antony |last=Kennedy |first2=Inayaili |last2=de Leon
|first1=Antony |last1=Kennedy |first2=Inayaili |last2=de Leon
|publisher=[[Apress]]
|publisher=[[Apress]]
|year=2011
|year=2011
Line 31: Line 32:
|first=Silvia
|first=Silvia
|last=Pfeiffer
|last=Pfeiffer
}}</ref> In the [http://www.w3.org/TR/2011/WD-html5-20110113/ January 13, 2011 version of the HTML5 Draft Report], the <code>&lt;track&gt;</code> tag was introduced and the specification was updated to document WebVTT cue text rendering rules. The WebVTT specification is still in draft stage but the basic features are already supported by all major browsers.
}}</ref> In the January 13, 2011, version of the HTML5 Draft Report, the <code>&lt;track&gt;</code> element was introduced and the specification was updated to document WebVTT cue text rendering rules.<ref>{{Cite web|url=http://www.w3.org/TR/2011/WD-html5-20110113/|title = HTML5}}</ref> The WebVTT specification is a W3C Candidate Recommendation, and the basic features are supported by all major browsers.


== Main differences from SubRip ==
== Main differences from SubRip ==


* WebVTT's first line starts with ''WEBVTT'' after the optional [[UTF-8]] [[byte order mark]]
* 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
* 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]] fractional values are separated by a [[full stop]] instead of a [[comma]]
* [[Timecode]] hours are optional
* Timecode hours are optional
* The frame numbering/identification preceding the [[timecode]] is optional
* The frame numbering/identification preceding the timecode is optional
* [[Comment (computer programming)|Comments]] identified by the word ''NOTE'' can be added
* [[Comment (computer programming)|Comments]] identified by the word ''NOTE'' can be added
* [[Metadata]] information can be added in a [[JSON]]-style format
* [[Metadata]] information can be added in a [[JSON]]-style format
* Chapter information can be optionally specified
* Chapter information can be optionally specified
* Only supports extended characters as [[UTF-8]]
* 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
* [[CSS]] in a separate file defined in the companion HTML document for C tags is used instead of the FONT element
* Cue settings allow the customization of cue positioning on the video<ref>{{cite web|title=WebVTT cue settings|url=http://dev.w3.org/html5/webvtt/#webvtt-cue-settings|publisher=W3C|accessdate=11 February 2015}}</ref>
* Cue settings allow the customization of cue positioning on the video<ref>{{cite web|title=WebVTT cue settings|url=http://dev.w3.org/html5/webvtt/#webvtt-cue-settings|publisher=W3C|accessdate=11 February 2015|archive-date=6 October 2015|archive-url=https://web.archive.org/web/20151006080243/http://dev.w3.org/html5/webvtt/#webvtt-cue-settings|url-status=dead}}</ref>


== Compatibility ==
== Compatibility ==
{| class="wikitable"
{| class="wikitable"
|+ Browser Support<ref>{{cite web|title=WebVTT support in browser|url=https://www.w3.org/community/texttracks/2012/08/23/webvtt-support-in-browsers/|publisher=W3C|accessdate=6 February 2017}}</ref> <ref>{{cite web|title=WebVTT Styling|url=http://www.jwplayer.com/html5/webvtt/|publisher=JWPlayer|accessdate=6 February 2017}}</ref>
|+ Browser Support<ref>{{cite web|title=WebVTT support in browser|url=https://www.w3.org/community/texttracks/2012/08/23/webvtt-support-in-browsers/|publisher=W3C|accessdate=6 February 2017}}</ref><ref>{{cite web|title=WebVTT Styling|url=http://www.jwplayer.com/html5/webvtt/|publisher=JWPlayer|accessdate=6 February 2017|archive-date=20 April 2016|archive-url=https://web.archive.org/web/20160420083635/https://www.jwplayer.com/html5/webvtt/|url-status=dead}}</ref>
! Browser
! Browser
! Cue Text Tags !! Cue Positioning !! CSS Styling
! Cue Text Tags !! Cue Positioning !! CSS Styling
Line 75: Line 76:
|}
|}
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.<ref>{{cite web|title=Implement the track element|url=https://bugzilla.mozilla.org/show_bug.cgi?id=629350}}</ref> YouTube began supporting WebVTT in April, 2013.<ref>{{cite web|title=Caption File - YouTube Help|url=https://support.google.com/youtube/bin/answer.py?answer=2734698&topic=3014331&ctx=topic}}</ref> As of July 24, 2014, Mozilla has enabled WebVTT on Firefox by default.<ref>{{cite web|title=Firefox 31 Release Notes|url=https://www.mozilla.org/en-US/mobile/31.0/releasenotes/}}</ref>
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.<ref>{{cite web|title=Implement the track element|url=https://bugzilla.mozilla.org/show_bug.cgi?id=629350}}</ref> YouTube began supporting WebVTT in April, 2013.<ref>{{cite web|title=Caption File - YouTube Help|url=https://support.google.com/youtube/bin/answer.py?answer=2734698&topic=3014331&ctx=topic}}</ref> As of July 24, 2014, Mozilla has enabled WebVTT on Firefox by default.<ref>{{cite web|title=Firefox 31 Release Notes|url=https://www.mozilla.org/en-US/mobile/31.0/releasenotes/}}</ref>

Subtitles in a .vtt file show online, but not when stored on a local drive.


== Example of WebVTT format ==
== Example of WebVTT format ==
⚫
A sample file from the W3C captioning [[Roger Bingham]] interviewing [[Neil deGrasse Tyson]]:<ref>{{Cite web |title=WebVtt: The Web Video Text Tracks Format |url=https://www.w3.org/TR/2019/CR-webvtt1-20190404/#introduction-caption |website=w3.org |publisher=The World Wide Web Consortium |accessdate=23 February 2023 |language=English |date=4 April 2019}}</ref>
⚫
<pre>
WEBVTT Kind: captions; Language: en


⚫
<pre>
00:09.000 --> 00:11.000
WEBVTT
<v Roger Bingham>We are in New York City


00:11.000 --> 00:13.000
00:11.000 --> 00:13.000
Line 107: Line 109:
<v Roger Bingham>And I want to do a follow-up on the last conversation we did.
<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%
00:30.000 --> 00:31.500 align:right size:50%
<v Roger Bingham>When we e-mailed—
<v Roger Bingham>When we e-mailed—


00:30.500 --> 00:32.500 align:start size:50%
00:30.500 --> 00:32.500 align:left size:50%
<v Neil deGrasse Tyson>Didn't we talk about enough in that conversation?
<v Neil deGrasse Tyson>Didn't we talk about enough in that conversation?


00:32.000 --> 00:35.500 align:end size:50%
00:32.000 --> 00:35.500 align:right size:50%
<v Roger Bingham>No! No no no no; 'cos 'cos obviously 'cos
<v Roger Bingham>No! No no no no; 'cos 'cos obviously 'cos


00:32.500 --> 00:33.500 align:start size:50%
00:32.500 --> 00:33.500 align:left size:50%
<v Neil deGrasse Tyson><i>Laughs</i>
<v Neil deGrasse Tyson><i>Laughs</i>


Line 123: Line 125:
</pre>
</pre>


⚫
== Other features ==
⚫
<ref>{{Cite web |title=WebVtt: The Web Video Text Tracks Format |url=https://www.w3.org/TR/2018/CR-webvtt1-20180510/#introduction-caption |website=w3.org |publisher=The World Wide Web Consortium |accessdate=16 September 2018 |language=English |date=10 May 2018}}</ref>


⚫
In June 2013, an example was added to the specification that included a new "region" setting.<ref>{{cite web|title=Added region example to Introduction section under "Other features" – GitHub commit details|website=[[GitHub]]|url=https://github.com/w3c/webvtt/commit/4255ed479aab5651654e323fd6e52915f951663c}}</ref> This feature is supported since Firefox 59 and Safari 14.1 (14.5 on iOS) but not in any other browser.<ref>{{Cite web|title = VTTCue.region - Web APIs &#124; MDN|website=[[MDN Web Docs]]|url=https://developer.mozilla.org/en-US/docs/Web/API/VTTCue/region#browser_compatibility}}</ref>
⚫
== Unsupported features ==

⚫
In June 2013 an example was added to the [http://dev.w3.org/html5/webvtt/#other-features other features] section of the specification that included a new "region" setting.<ref>{{cite web|title=Added region example to Introduction section under "Other features" – GitHub commit details|url=https://github.com/w3c/webvtt/commit/4255ed479aab5651654e323fd6e52915f951663c}}</ref> As of February 2015, however, no player included support for this feature.


== References ==
== References ==
⚫
{{reflist}}

⚫
{{reflist|2}}


== External links ==
== External links ==
* [https://www.w3.org/TR/webvtt1/ WebVTT Standard]
* [http://www.blueman.name/Delphi.php VTTandSRT], small free french software to convert a .VTT subtitles file into a .SRT subtitles file (and conversely).
* [https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API Mozilla's developer page concerning WebVTT implementation]
* [http://www.whiterocksoftware.com/2022/11/7-ways-to-convert-vtt-file.html?q=vtt#VttViewer WebVTT Viewer]
{{W3C Standards}}


[[Category:Subtitling]]
[[Category:Subtitling]]

Latest revision as of 11:01, 27 September 2024

WebVTT
Filename extension
.vtt
Internet media type
text/vtt
Developed byWorld Wide Web Consortium (W3C)
Initial release10 August 2010; 14 years ago (2010-08-10)[1]
Latest release
4 April 2019; 5 years ago (2019-04-04)
Type of formatTimed text
Extended fromSRT
StandardW3C WebVTT
Open format?Yes
Free format?Yes

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 the 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> element was introduced and the specification was updated to document WebVTT cue text rendering rules.[6] The WebVTT specification is a W3C Candidate Recommendation, and the basic features are supported by all major browsers.

Main differences from SubRip

[edit]
  • 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 element
  • Cue settings allow the customization of cue positioning on the video[7]

Compatibility

[edit]
Browser Support[8][9]
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+) —
Microsoft Edge 12+ —
Internet Explorer 10+ —

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]

Subtitles in a .vtt file show online, but not when stored on a local drive.

Example of WebVTT format

[edit]

A sample file from the W3C captioning Roger Bingham interviewing Neil deGrasse Tyson:[13] 

WEBVTT

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:right size:50%
<v Roger Bingham>When we e-mailed—

00:30.500 --> 00:32.500 align:left size:50%
<v Neil deGrasse Tyson>Didn't we talk about enough in that conversation?

00:32.000 --> 00:35.500 align:right size:50%
<v Roger Bingham>No! No no no no; 'cos 'cos obviously 'cos

00:32.500 --> 00:33.500 align:left 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.

Other features

[edit]

In June 2013, an example was added to the specification that included a new "region" setting.[14] This feature is supported since Firefox 59 and Safari 14.1 (14.5 on iOS) but not in any other browser.[15]

References

[edit]
  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. ^ "HTML5".
  7. ^ "WebVTT cue settings". W3C. Archived from the original on 6 October 2015. Retrieved 11 February 2015.
  8. ^ "WebVTT support in browser". W3C. Retrieved 6 February 2017.
  9. ^ "WebVTT Styling". JWPlayer. Archived from the original on 20 April 2016. 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. 4 April 2019. Retrieved 23 February 2023.
  14. ^ "Added region example to Introduction section under "Other features" – GitHub commit details". GitHub.
  15. ^ "VTTCue.region - Web APIs | MDN". MDN Web Docs.
[edit]
Retrieved from "https://en.wikipedia.org/w/index.php?title=WebVTT&oldid=1248049277"