WebVTT: Difference between revisions - Wikipedia


Article Images

Line 1:

{{Short description|File format}}

{{Infobox file format

| name = WebVTT

Line 5 ⟶ 6:

| 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>

| latest_release_datelatest_release_version = {{start date and age|20152019|0104|3104|df=yes}}

| genre = [[Timed text]]

| extended_from = [[SubRip|SRT]]

| standard = [https://www.w3.org/TR/webvtt1/ W3C WebVTT]

| open = Yes

| free = Yes

}}

| url = (VTT)}}

'''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

|title=WebVTT versus TTML: XML considered harmful for web captions?

Line 17 ⟶ 21:

}}</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

|url=https://books.google.com/books?id=9A6w3ZBDtysC&pg=PA168#v=onepage&f=false

|title=Pro CSS for High Traffic Websites

|firstfirst1=Antony |lastlast1=Kennedy |first2=Inayaili |last2=de Leon

|publisher=[[Apress]]

|year=2011

Line 28 ⟶ 32:

|first=Silvia

|last=Pfeiffer

}}</ref> In the January 13, 2011, version of the HTML5 Draft Report], the <code>&lt;track&gt;</code> tagelement 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 stilla inW3C draftCandidate stageRecommendation, butand the basic features are already supported by all major browsers.

== Main differences from SubRip ==

Line 35 ⟶ 39:

* 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

* [[Comment (computer programming)|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 tagelement

* 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 ==

{| 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|archive-date=20 April 2016|archive-url=https://web.archive.org/web/20160420083635/https://www.jwplayer.com/html5/webvtt/|url-status=dead}}</ref>

! Browser

! Cue Text Tags !! Cue Positioning !! CSS Styling

Line 72 ⟶ 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>

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

== 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/20182019/CR-webvtt1-2018051020190404/#introduction-caption |website=w3.org |publisher=The World Wide Web Consortium |accessdate=1623 SeptemberFebruary 20182023 |language=English |date=104 MayApril 20182019}}</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

Line 104 ⟶ 109:

<v Roger Bingham>And I want to do a follow-up on the last conversation we did.

00:30.000 --> 00:31.500 align:endright size:50%

<v Roger Bingham>When we e-mailed—

00:30.500 --> 00:32.500 align:startleft size:50%

<v Neil deGrasse Tyson>Didn't we talk about enough in that conversation?

00:32.000 --> 00:35.500 align:endright size:50%

<v Roger Bingham>No! No no no no; 'cos 'cos obviously 'cos

00:32.500 --> 00:33.500 align:startleft size:50%

<v Neil deGrasse Tyson><i>Laughs</i>

Line 119 ⟶ 124:

<v Roger Bingham>You know I'm so excited my glasses are falling off here.

</pre>

▲<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>

== Other features ==

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<ref>https://developer and Safari 14.mozilla1 (14.org/en-US/docs/Web/API/WebVTT_API#Notes</ref>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_compatibilitybrowser_compatibility}}</ref>

== References ==

{{reflist|2}}▼

== External links ==

▲{{reflist|2}}

* [https://www.w3.org/TR/webvtt1/ WebVTT Standard]

* [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]]