WebVTT

WebVTT

[40] WebVTT は、動画音声に対する字幕などの注釈を記述するための形式です。 HTML と共に利用するために開発されました。

仕様書

[79] WebVTT の構文、意味、構文解析の方法は WebVTT 仕様で規定されていますが、 API媒体要素の処理モデルとの絡みは HTML 仕様で規定されています。

構文

[66] WebVTT の構文は文脈依存言語と思われます。

ABNF 風構文

[65] 構文を ABNF 風に表記すると次のようになります。なお、 WebVTT の構文の要件は ABNF では表現できないので、次に示す構文は実際よりも緩い制約になっています。

wsp := U+0020 / U+0009
file-body := [BOM] 'WEBVTT' wsp *(Char - wsp) 2*line-terminator [(cue / comment) *(2*line-terminator (cue / comment))] *line-terminators
cue := [cue-identifier line-terminator] cue-timings 1*(wsp cue-settings) line-terminator cueue-payload
cue-payload := cue-text / chapter-title-text / metadata-text
line-terminator := U+000D U+000A / U+000A / U+000D
comment := 'NOTE' ['S'] (wsp / line-terminator) ((Char - U+000D - U+000A) *([line-terminator] (Char - U+000D - U+000A)) - (*Char "-->" *Char))
cue-identifier := 1*(Char - line-terminator) - (*Char "-->" *Char)
cue-timings := timestamp 1*wsp "-->" 1*wsp timestamp
digit := U+0030 .. U+0039
timestamp := [2*digit ":"] 2*digit ":" 2*digit "." 3*digit
cue-settings := [cue-setting *(1*wsp cue-setting)]
cue-setting := vertical-text-cue-setting / line-position-cue-setting / text-position-cue-setting / size-cue-setting / alignment-cue-setting
vertical-text-cue-setting := 'vertical:' ('rl' / 'rl')
line-position-cue-setting := 'line:' (relative-position / line-number)
relative-position := 1*digit "%"
line-number := ["-"] 1*digit
text-position-cue-setting := 'position:' relative-position
size-cue-setting := 'size:' 1*digit "%"
alignment-cue-setting := 'align:' ('start' / 'middle' / 'end')
metadata-text := [meta *(line-separator meta)]
meta := 1*(Char - line-separator)
chapter-title-text := [text *([line-separator] text)]
text := cue-text-span / cue-amp-escape / cue-lt-escape / cue-gt-escape / cue-lrm-escape / cue-rlm-escape / cue-nbsp-escape
cue-text := [cue-component *([line-separator] cue-component)]
cue-component := cue-class-span / cue-italics-span / cue-bold-span / cue-underline-span / cue-ruby-span / cue-voice-span / cue-language-span / cue-timestamp / text
cue-internal-text := [line-terminator] *(cue-component [line-terminator])
cue-class-span := cue-span-start-tag('c') cue-internal-text cue-span-end-tag('c')
cue-italics-span := cue-span-start-tag('i') cue-internal-text cue-span-end-tag('i')
cue-bold-span := cue-span-start-tag('b') cue-internal-text cue-span-end-tag('b')
cue-underline-span := cue-span-start-tag('u') cue-internal-text cue-span-end-tag('u')
cue-ruby-span := cue-span-start-tag('ruby') 1*(cue-internal-text cue-span-start-tag('rt') cue-internal-text [cue-span-end-tag('rt')]) [line-terminator] *(wsp [line-terminator]) cue-span-end-tag('ruby')
cue-voice-span := cue-span-start-tag-annotated('v') cue-internal-text [cue-span-end-tag('v')]
cue-language-span := cue-span-start-tag-annotated('lang') cue-internal-text cue-span-end-tag('lang')
cue-span-start-tag(tag-name) := "<" tag-name *("." class) ">"
cue-span-start-tag-annotated(tag-name) := "<" tag-name *("." class) wsp 1*(annotation) ">"
class := 1*(Char - (U+0009 / U+000A / U+000D / U+0020 / "&" / "<" / ">" / "."))
annotation := cue-span-start-tag-annotation-text / cue-amp-escape / cue-lt/escape / cue-gt-escape / cue-lrm-escape / cue-rlm-escape / cue-nbsp-escape
cue-span-end-tag(tag-name) := "</" tag-name ">"
cue-timestamp := "<" timestamp ">"
cue-text-span := 1*(Char - (U+000A / U+000D / "&" / "<"))
cue-span-start-tag-annotation-text := 1*(Char - (U+000A / U+000D / "&" / ">"))
cue-amp-escape := '&amp;'
cue-lt-escape := '&lt;'
cue-gt-escape := '&gt;'
cue-lrm-escape := '&lrm;'
cue-rlm-escape := '&rlm;'
cue-nbsp-escape := '&nbsp;'

文脈

[43] WebVTT 文書は、HTML 文書から track 要素により参照します。

[134] HLS媒体セグメントとして使うこともできます。

API

[75] 既存の WebVTT 文書の参照は、スクリプトからも track 要素を操作することによって行えます。

[76] また WebVTT によって記述された cue も、テキスト・トラックAPI により参照、操作できます。 cue を追加したり削除したりすることができます。

[77] テキスト・トラック自体も、 addTextTrack メソッドによって動的に生成することができます。

歴史

WebSRT

[41] 当初は WHATWG により、 SRT に幾分の互換性のある WebSRT として開発されました。

[55] HTML の他の部分とは別に WebSRT だけ取り出して読みたいという要望があったため、 WebSRT の部分だけ抜き出した文書が用意されました。

[56] 単独の仕様書ではなく、あくまで該当する部分を抜き出しただけという位置付けでした。

[57] JavaScript での実装も登場しました。

[58] 既存の SRT のデータの収集と分析も行われ、それが WebSRT 仕様にも反映されています。

WebVTT

[42] しかしいくらかの修正を加えた後も、既存の (Web 以外で使われている) SRT との互換性が十分ではないため (また互換性を最大化することが目的でもないため)SRT を名乗ることによる混乱を招かぬよう、 WebVTT に改称されました。

[59] JavaScript構文解析器妥当性検証器の実装も登場しました。著者は annevk です。

W3C Web Media Text Tracks Community Group

[60] 2011年11月には W3C Web Media Text Tracks Community Group が組織されました。 同 CGIan Hickson編集者として WebVTT の標準化を W3C において行うこととなったため、 WebVTT 仕様は WHATWG から同 CG に移管されました。

[61] 移管されたとは言え、編集者は変わらず Ian Hickson であり、単一のファイルから HTMLWebVTT の仕様書を生成するスタイルは継続しています。 W3CCVS で管理されてはいますが、元のファイルは WHATWGSVN にあります。 実質的に変化したのは HTML Living Standard から WebVTT の部分が削除されたことくらいです。

[62] この頃まで Ian は Web Applications 1.0 / HTML Living Standard をすべての仕様の統合体としていたのに、 なぜ WebVTT を同じスタイルで、 HTML Living Standard の一部でもあり、 WebVTT Living Standard という単体の仕様でもある、としなかったのかは謎です。
[63] W3C CG はこの頃できた新しい制度で、 W3C の資源を利用しつつも自由な運営と標準化を行えます。 WebVTT Living StandardW3C のサイトにあり、 W3C のロゴも掲示されていますが、 CSS(W3C の青色のものではなく) WHATWG の緑色のものを使っています。 また、 W3C 本体の仕様に対しては認めていない「Living Standard」を名乗っています。

[64] 2012年4月後半に Ian Hickson が久々に WebVTT モードになっています。

[67] LeanBack Player | Test case implementation of WebVTT format (Web Video Text Tracks) ( ( 版)) <http://leanbackplayer.com/test/webvtt.html>

[68] LeanBack Player | WebVTT format (Web Video Text Tracks) reviewed ( ( 版)) <http://leanbackplayer.com/other/webvtt.html>

[69] Understanding WebVTT file format ( (Julien Villetorte 著, 版)) <http://www.delphiki.com/webvtt/>

[70] [proposed] WebVTT Working Group ( ( 版)) <http://www.w3.org/2011/05/google-webvtt-charter.html>

[71] rillian/webvtt · GitHub ( ( 版)) <https://github.com/rillian/webvtt>

[72] Bug 72215 – Enable WebVTT parsing layout tests ( ( 版)) <https://bugs.webkit.org/show_bug.cgi?id=72215>

[73] /trunk/LayoutTests/media/track/captions-webvtt – WebKit ( ( 版)) <http://trac.webkit.org/browser/trunk/LayoutTests/media/track/captions-webvtt>

[74] 629350 – Implement the track element ( ( 版)) <https://bugzilla.mozilla.org/show_bug.cgi?id=629350>

[80] IRC logs: freenode / #whatwg / 20120425 ( ( 版)) <http://krijnhoetmer.nl/irc-logs/whatwg/20120425#l-139>

[81] WebVTT in WebM - wiki ( ( 版)) <http://wiki.webmproject.org/webm-metadata/temporal-metadata/webvtt-in-webm>

[82] Embedding RDF in WebVTT | NinSuna: Metadata-driven Media Adaptation and Delivery ( ( 版)) <http://ninsuna.elis.ugent.be/node/39>

[83] 2012年の秋には注釈<lang> が追加されています。

[84] IRC logs: freenode / #whatwg / 20130125 ( ( 版)) <http://krijnhoetmer.nl/irc-logs/whatwg/20130125>

[85] [webkit-dev] Extending WebVTT Implementation ( ( 版)) <https://lists.webkit.org/pipermail/webkit-dev/2013-February/023943.html>

[86] WebVTT Extension: Regions for rendering cue groups ( ( 版)) <https://dvcs.w3.org/hg/text-tracks/raw-file/default/608toVTT/region.html>

[87] Support for advanced caption features (inc rollup) ( (Silvia Pfeiffer 著, 版)) <http://lists.w3.org/Archives/Public/public-texttracks/2012Dec/0000.html>

[88] Bug 20348 – WebVTT: Provide for some setting that allows UAs to implement captions in a scrolling manner ( ( 版)) <https://www.w3.org/Bugs/Public/show_bug.cgi?id=20348>

[89] IRC logs: freenode / #whatwg / 20130222 ( ( 版)) <http://krijnhoetmer.nl/irc-logs/whatwg/20130222>

[90] Web Applications 1.0 r7748 Split more WebVTT-specific things into the WebVTT spec. This also makes some normative changes to HTML for handling non-WebVTT cue types, but that shouldn't affect any existing implementations. ( ( 版)) <http://html5.org/tools/web-apps-tracker?from=7747&to=7748>

[91] Web Applications 1.0 r7748 Split more WebVTT-specific things into the WebVTT spec. This also makes some normative changes to HTML for handling non-WebVTT cue types, but that shouldn't affect any existing implementations. ( ( 版)) <http://html5.org/tools/web-apps-tracker?from=7747&to=7748>

[92] Web Applications 1.0 r7834 WebVTT is now being edited by Silvia Pfeiffer. If you want to follow further development, please subscribe to public-texttracks@w3.org, the WebVTT community group's mailing list. ( ( 版)) <http://html5.org/tools/web-apps-tracker?from=7833&to=7834>

[93] WebVTT spec ( (Ian Hickson 著, 版)) <http://lists.w3.org/Archives/Public/public-texttracks/2013Feb/0005.html>

[94] Re: WebVTT spec ( (Ian Hickson 著, 版)) <http://lists.w3.org/Archives/Public/public-texttracks/2013Mar/0046.html>

[95] Conversion of 608/708 captions to WebVTT ( ( 版)) <https://dvcs.w3.org/hg/text-tracks/raw-file/default/608toVTT/608toVTT.html>

[96] WebVTT Extension: Regions for rendering cue groups ( ( 版)) <https://dvcs.w3.org/hg/text-tracks/raw-file/default/608toVTT/region.html>

[97] [whatwg] Reconsidering how we deal with text track cues ( ( 版)) <http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2013-June/039727.html>

[98] IRC logs: freenode / #whatwg / 20130611 ( ( 版)) <http://krijnhoetmer.nl/irc-logs/whatwg/20130611>

[99] [whatwg] Reconsidering how we deal with text track cues ( ( 版)) <http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2013-September/040677.html>

[100] text-tracks: Summary ( ( 版)) <https://dvcs.w3.org/hg/text-tracks/>

[101] text-tracks: File revisions ( ( 版)) <https://dvcs.w3.org/hg/text-tracks/log/99d7074899a2/webvtt/webvtt.html>

[102] Add support for header fields. by silviapfeiffer · Pull Request #6 · annevk/webvtt ( ( 版)) <https://github.com/annevk/webvtt/pull/6>

[103] IRC logs: freenode / #whatwg / 20141014 ( ( 版)) <http://krijnhoetmer.nl/irc-logs/whatwg/20141014>

[104] WebVTT: The Web Video Text Tracks Format ( ( 版)) <http://www.w3.org/TR/2014/WD-webvtt1-20141113/>

[105] Web Applications 1.0 r8859 Simplify how we define how to get chapters out of WebVTT ( ( 版)) <https://html5.org/r/8859>

[106] w3c/webvtt ( ( 版)) <https://github.com/w3c/webvtt>

[28] Hand over to Simon · w3c/webvtt@b25fdee ( 版) <https://github.com/w3c/webvtt/commit/b25fdee7100a825e99009cf8d66ac0e057bff5e5>

[107] public-texttracks@w3.org Mail Archives ( 版) <https://lists.w3.org/Archives/Public/public-texttracks/>

[108] [webvtt] Spec editing (Simon Pieters 著, 版) <https://lists.w3.org/Archives/Public/public-texttracks/2015Sep/0011.html>

[109] Stepping down as WebVTT editor (Philip Jägenstedt 著, 版) <https://lists.w3.org/Archives/Public/public-texttracks/2015Sep/0008.html>

[110] Change of editors for the VTT work (David Singer 著, 版) <https://lists.w3.org/Archives/Public/public-texttracks/2015Sep/0002.html>

[111] Mapping Between TTML and WebVTT ( 版) <https://dvcs.w3.org/hg/ttml/raw-file/tip/ttml-webvtt-mapping/mappingbetweenTTMLandWebVTTW3C.html>

[112] IRC logs: freenode / #whatwg / 20150923 ( 版) <http://krijnhoetmer.nl/irc-logs/whatwg/20150923#l-267>

[113] whatwg/webvtt ( 版) <https://github.com/whatwg/webvtt>

[114] WebVTT: The Web Video Text Tracks Format ( 版) <https://webvtt.spec.whatwg.org/>

[115] Fix #124: make more types follow text/plain navigate logic · whatwg/html@f94f3c4 ( 版) <https://github.com/whatwg/html/commit/f94f3c4595fbc5fecb747ef52f46cdc5f2b3feec>

[116] Converting SRT files to WebVTT files ( 版) <http://www.webvtt.org/>

[117] w3c/webvtt ( 版) <https://github.com/w3c/webvtt>

[118] Re: [webvtt] Spec editing (Simon Pieters 著, 版) <https://lists.w3.org/Archives/Public/public-texttracks/2015Oct/0001.html>

[119] WebVTT: The Web Video Text Tracks Format ( 版) <https://w3c.github.io/webvtt/>

[120] Merge pull request #213 from w3c/convert-to-bikeshed · w3c/webvtt@56c8758 ( 版) <https://github.com/w3c/webvtt/commit/56c8758e4828e645fe48208e9d71a00042e5a660>

[121] Attempt to redirect whatwg copy to new location · w3c/webvtt@504110b ( 版) <https://github.com/w3c/webvtt/commit/504110bea27ca4dbca85186d2b89097e604982bb>

[122] HTML-level redirect whatwg copy to new location · w3c/webvtt@f6078cc ( 版) <https://github.com/w3c/webvtt/commit/f6078cc7af6e5af10f2ad3243602e5e71406bd09>

[123] IRC logs: freenode / #whatwg / 20151021 ( 版) <http://krijnhoetmer.nl/irc-logs/whatwg/20151021>

[124] Live WebVTT Viewer ( 版) <https://zcorpan.github.io/live-webvtt-viewer/>

[125] Safari 7.0 ( 版) <https://developer.apple.com/library/safari/releasenotes/General/WhatsNewInSafari/Articles/Safari_7_0.html#//apple_ref/doc/uid/TP40014305-CH5-SW6>

Safari’s support for WebVTT has been enhanced to let you embed VTT captions within a movie file itself rather than in a separate file of their own, and to add style properties to a caption to control its visual presentation:

visibility

font-family

font-size

text-decoration

text-outline

text-shadow

color

opacity

background

outline

white-space

[126] Re: Stepping down as WebVTT editor (David Singer 著, 版) <https://lists.w3.org/Archives/Public/public-texttracks/2015Nov/0016.html>

[127] WebVTT: The Web Video Text Tracks Format ( 版) <http://www.w3.org/TR/2015/WD-webvtt1-20151208/>

[128] Styling Captions for FCC Compliance | JW Player ( 版) <https://support.jwplayer.com/customer/portal/articles/1482067-styling-captions-for-fcc-compliance>

JW Player does not yet support WebVTT cue settings (line, position, size, etc.), nor most WebVTT cue objects (class, ruby, timestamp, etc.). They will not break playback, but are simply ignored. However, some basic HTML tags are supported:

<b>: to make text bold.

<i>: to make text italic.

<u>: to underline text.

<font size="123">: to change the text fontsize.

<font color="ffcc00">: to change the text color.

Here is an example VTT file with a few cues containing inline styles:

WEBVTT

00:00:08.000 --> 00:00:10.000

<b>Nothing</b> is going on.

00:00:10.500 --> 00:00:12.500

<font color="#3333CC">Violet, <i>please</i>!</font>

- I am <font size="20" color="#FF0000"><u>not</u></font> your babe!

Note these HTML tags can also be used in SRT or DFXP files. DFXP-specific styling functionality is not supported though.

[129] The WebM Project | WebM Container Guidelines () <https://www.webmproject.org/docs/container/>

[130] Re: Proposed W3C Charter: Timed Text Working Group - Google グループ () <https://groups.google.com/forum/#!topic/mozilla.dev.platform/m9K94yLq9-U/discussion>

[131] 25693 – Need an event to determine when cues have been added to a TextTrack () <https://www.w3.org/Bugs/Public/show_bug.cgi?id=25693>

[132] Call for wide Review of WebVTT for Web Platform WG (Thierry MICHEL著, ) <https://lists.w3.org/Archives/Public/public-webapps/2017JulSep/0024.html>

[133] WebVTT: The Web Video Text Tracks Format () <https://www.w3.org/TR/2017/WD-webvtt1-20170808/>