仕様書

[54] WebVTT Standard (2012-04-26 21:10:07 +09:00 版) http://dev.w3.org/html5/webvtt/
- [135] 移転確認 2024-08-26T12:52:13.00Z
- [136] WebVTT: The Web Video Text Tracks Format, 2023-03-10T20:45:24.000Z, 2024-08-26T12:51:42.755Z https://w3c.github.io/webvtt/
[78] HTML Standard (2012-04-28 00:40:00 +09:00 版) http://www.whatwg.org/specs/web-apps/current-work/#timed-text-tracks

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

構文

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] 単独の仕様書ではなく、あくまで該当する部分を抜き出しただけという位置付けでした。

[27] WebSRT (2010-07-23 17:03:44 +09:00 版) http://www.whatwg.org/specs/web-apps/current-work/websrt.html

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

[30] websrtjs: Summary (2010-08-10 23:54:23 +09:00 版) http://hg.hoppipolla.co.uk/hgwebdir.cgi/websrtjs/

[31] WebSRT: 字幕 for HTML5 (2010-08-17 20:09:45 +09:00 版) http://people.opera.com/danield/html5/websrt/

[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 が組織されました。同 CG は Ian Hickson を編集者として WebVTT の標準化を W3C において行うこととなったため、 WebVTT 仕様は WHATWG から同 CG に移管されました。

[61] 移管されたとは言え、編集者は変わらず Ian Hickson であり、単一のファイルから HTML と WebVTT の仕様書を生成するスタイルは継続しています。 W3C の CVS で管理されてはいますが、元のファイルは WHATWG の SVN にあります。実質的に変化したのは 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 Standard は W3C のサイトにあり、 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) ( (2012-04-28 08:21:11 +09:00 版)) http://leanbackplayer.com/test/webvtt.html

[68] LeanBack Player | WebVTT format (Web Video Text Tracks) reviewed ( (2012-04-28 08:22:12 +09:00 版)) http://leanbackplayer.com/other/webvtt.html

[69] Understanding WebVTT file format ( (Julien Villetorte 著, 2011-05-31 08:10:09 +09:00 版)) http://www.delphiki.com/webvtt/

[70] [proposed] WebVTT Working Group ( (2012-03-23 13:22:36 +09:00 版)) http://www.w3.org/2011/05/google-webvtt-charter.html

[71] rillian/webvtt · GitHub ( (2012-04-28 08:24:32 +09:00 版)) https://github.com/rillian/webvtt

[72] Bug 72215 – Enable WebVTT parsing layout tests ( (2012-04-28 08:25:28 +09:00 版)) https://bugs.webkit.org/show_bug.cgi?id=72215

[73] /trunk/LayoutTests/media/track/captions-webvtt – WebKit ( (2012-04-28 08:27:17 +09:00 版)) http://trac.webkit.org/browser/trunk/LayoutTests/media/track/captions-webvtt

[74] 629350 – Implement the track element ( (2012-04-28 08:28:34 +09:00 版)) https://bugzilla.mozilla.org/show_bug.cgi?id=629350

[80] IRC logs: freenode / #whatwg / 20120425 ( (2012-05-02 17:23:32 +09:00 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20120425#l-139

[81] WebVTT in WebM - wiki ( (2012-06-25 02:08:10 +09:00 版)) http://wiki.webmproject.org/webm-metadata/temporal-metadata/webvtt-in-webm

[82] Embedding RDF in WebVTT | NinSuna: Metadata-driven Media Adaptation and Delivery ( (2012-06-28 00:43:35 +09:00 版)) http://ninsuna.elis.ugent.be/node/39

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

[84] IRC logs: freenode / #whatwg / 20130125 ( (2013-01-26 21:28:22 +09:00 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20130125

[85] [webkit-dev] Extending WebVTT Implementation ( (2013-02-25 22:56:47 +09:00 版)) https://lists.webkit.org/pipermail/webkit-dev/2013-February/023943.html

[86] WebVTT Extension: Regions for rendering cue groups ( (2013-03-02 00:09:55 +09:00 版)) https://dvcs.w3.org/hg/text-tracks/raw-file/default/608toVTT/region.html

[87] Support for advanced caption features (inc rollup) ( (Silvia Pfeiffer 著, 2012-12-04 20:14:12 +09:00 版)) 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 ( (2013-03-02 13:04:54 +09:00 版)) https://www.w3.org/Bugs/Public/show_bug.cgi?id=20348

[89] IRC logs: freenode / #whatwg / 20130222 ( (2013-03-01 23:58:21 +09:00 版)) 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. ( (2013-03-12 08:43:00 +09:00 版)) 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. ( (2013-03-12 08:43:00 +09:00 版)) 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. ( (2013-04-15 08:15:00 +09:00 版)) http://html5.org/tools/web-apps-tracker?from=7833&to=7834

[93] WebVTT spec ( (Ian Hickson 著, 2013-02-23 03:48:39 +09:00 版)) http://lists.w3.org/Archives/Public/public-texttracks/2013Feb/0005.html

[94] Re: WebVTT spec ( (Ian Hickson 著, 2013-03-12 08:47:01 +09:00 版)) http://lists.w3.org/Archives/Public/public-texttracks/2013Mar/0046.html

[95] Conversion of 608/708 captions to WebVTT ( (2013-05-20 02:26:30 +09:00 版)) https://dvcs.w3.org/hg/text-tracks/raw-file/default/608toVTT/608toVTT.html

[96] WebVTT Extension: Regions for rendering cue groups ( (2013-05-20 02:28:31 +09:00 版)) https://dvcs.w3.org/hg/text-tracks/raw-file/default/608toVTT/region.html

[97] [whatwg] Reconsidering how we deal with text track cues ( (2013-06-12 05:11:48 +09:00 版)) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2013-June/039727.html

[98] IRC logs: freenode / #whatwg / 20130611 ( (2013-06-13 21:54:59 +09:00 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20130611

[99] [whatwg] Reconsidering how we deal with text track cues ( (2013-09-04 00:01:14 +09:00 版)) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2013-September/040677.html

[100] text-tracks: Summary ( (2013-11-05 04:56:07 +09:00 版)) https://dvcs.w3.org/hg/text-tracks/

[101] text-tracks: File revisions ( (2013-11-05 04:59:08 +09:00 版)) 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 ( (2014-10-18 02:44:54 +09:00 版)) https://github.com/annevk/webvtt/pull/6

[103] IRC logs: freenode / #whatwg / 20141014 ( (2014-10-18 03:07:20 +09:00 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20141014

[104] WebVTT: The Web Video Text Tracks Format ( (2014-11-12 23:16:46 +09:00 版)) 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 ( (2014-11-27 07:12:00 +09:00 版)) https://html5.org/r/8859

[106] w3c/webvtt ( (2015-01-07 18:43:48 +09:00 版)) https://github.com/w3c/webvtt

[28] Hand over to Simon · w3c/webvtt@b25fdee (2015-09-23 13:47:20 +09:00 版) https://github.com/w3c/webvtt/commit/b25fdee7100a825e99009cf8d66ac0e057bff5e5

[107] public-texttracks@w3.org Mail Archives (2015-09-23 13:53:14 +09:00 版) https://lists.w3.org/Archives/Public/public-texttracks/

[108] [webvtt] Spec editing (Simon Pieters 著, 2015-09-22 19:48:57 +09:00 版) https://lists.w3.org/Archives/Public/public-texttracks/2015Sep/0011.html

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

[110] Change of editors for the VTT work (David Singer 著, 2015-09-11 10:05:43 +09:00 版) https://lists.w3.org/Archives/Public/public-texttracks/2015Sep/0002.html

[111] Mapping Between TTML and WebVTT (2015-09-23 13:58:08 +09:00 版) https://dvcs.w3.org/hg/ttml/raw-file/tip/ttml-webvtt-mapping/mappingbetweenTTMLandWebVTTW3C.html

[112] IRC logs: freenode / #whatwg / 20150923 (2015-09-24 18:04:06 +09:00 版) http://krijnhoetmer.nl/irc-logs/whatwg/20150923#l-267

[113] whatwg/webvtt (2015-09-24 18:19:14 +09:00 版) https://github.com/whatwg/webvtt

[114] WebVTT: The Web Video Text Tracks Format (2015-09-24 06:59:41 +09:00 版) https://webvtt.spec.whatwg.org/

[115] Fix #124: make more types follow text/plain navigate logic · whatwg/html@f94f3c4 (2015-10-01 01:01:17 +09:00 版) https://github.com/whatwg/html/commit/f94f3c4595fbc5fecb747ef52f46cdc5f2b3feec

[116] Converting SRT files to WebVTT files (2014-10-02 19:13:32 +09:00 版) http://www.webvtt.org/

[117] w3c/webvtt (2015-10-06 20:47:48 +09:00 版) https://github.com/w3c/webvtt

[118] Re: [webvtt] Spec editing (Simon Pieters 著, 2015-10-02 17:18:53 +09:00 版) https://lists.w3.org/Archives/Public/public-texttracks/2015Oct/0001.html

[119] WebVTT: The Web Video Text Tracks Format (2015-10-09 06:29:27 +09:00 版) https://w3c.github.io/webvtt/

[120] Merge pull request #213 from w3c/convert-to-bikeshed · w3c/webvtt@56c8758 (2015-10-09 18:03:04 +09:00 版) https://github.com/w3c/webvtt/commit/56c8758e4828e645fe48208e9d71a00042e5a660

[121] Attempt to redirect whatwg copy to new location · w3c/webvtt@504110b (2015-10-20 15:11:30 +09:00 版) https://github.com/w3c/webvtt/commit/504110bea27ca4dbca85186d2b89097e604982bb

[122] HTML-level redirect whatwg copy to new location · w3c/webvtt@f6078cc (2015-10-20 15:12:07 +09:00 版) https://github.com/w3c/webvtt/commit/f6078cc7af6e5af10f2ad3243602e5e71406bd09

[123] IRC logs: freenode / #whatwg / 20151021 (2015-10-22 11:35:07 +09:00 版) http://krijnhoetmer.nl/irc-logs/whatwg/20151021

[124] Live WebVTT Viewer (2015-11-03 00:19:43 +09:00 版) https://zcorpan.github.io/live-webvtt-viewer/

[125] Safari 7.0 (2015-11-04 23:02:46 +09:00 版) 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 著, 2015-11-06 02:27:27 +09:00 版) https://lists.w3.org/Archives/Public/public-texttracks/2015Nov/0016.html

[127] WebVTT: The Web Video Text Tracks Format (2015-12-08 23:56:39 +09:00 版) http://www.w3.org/TR/2015/WD-webvtt1-20151208/

[128] Styling Captions for FCC Compliance | JW Player (2016-03-26 07:02:57 +09:00 版) 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:
: to make text bold.
: to make text italic.
: to underline text.
: to change the text fontsize.
: 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
Nothing is going on.
00:00:10.500 --> 00:00:12.500
Violet, please!
- I am not 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 (2017-04-01 08:15:00 +09:00) https://www.webmproject.org/docs/container/

[130] Re: Proposed W3C Charter: Timed Text Working Group - Google グループ (2017-06-29 20:33:44 +09:00) 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 (2017-07-23 16:31:16 +09:00) https://www.w3.org/Bugs/Public/show_bug.cgi?id=25693

[132] Call for wide Review of WebVTT for Web Platform WG (Thierry MICHEL著, 2017-08-09 17:45:13 +09:00) https://lists.w3.org/Archives/Public/public-webapps/2017JulSep/0024.html

[133] WebVTT: The Web Video Text Tracks Format (2017-08-04 01:17:20 +09:00) https://www.w3.org/TR/2017/WD-webvtt1-20170808/

[137] WebVTT: The Web Video Text Tracks Format, 2023-03-10T20:45:24.000Z, 2024-08-26T12:51:42.755Z https://w3c.github.io/webvtt/

[138] GitHub - w3c/webvtt: WebVTT Standard, 2024-08-26T12:52:25.000Z https://github.com/w3c/webvtt

i

b

u

ruby

rt

借用先

WebVTT

出典

注釈

WebVTT 媒体要素で利用可能な字幕記述形式。 WEBVTT 当初は HTML5 で規定されていたが、後に独立した仕様書となった。字幕の文字列データには HTML のタグ風の構文を使うが、構文やタグ名は HTML と違いもある。 HTML 風のタグも含め、構文は事実上の標準だった SRT から発展した。 SRTResearch