- From: CVS User pjgenste <cvsmail@w3.org>
- Date: Wed, 19 Feb 2014 08:18:03 +0000
- To: public-html-commits@w3.org
Update of /sources/public/html5/webvtt
In directory roscoe:/tmp/cvs-serv25886
Added Files:
e0a5a82bd5be3501e7649a949fcce4c7b83a427c.html
Log Message:
Make a stable copy of commit e0a5a82bd5be3501e7649a949fcce4c7b83a427c
--- /sources/public/html5/webvtt/e0a5a82bd5be3501e7649a949fcce4c7b83a427c.html 2014/02/19 08:18:03 NONE
+++ /sources/public/html5/webvtt/e0a5a82bd5be3501e7649a949fcce4c7b83a427c.html 2014/02/19 08:18:03 1.1
<!DOCTYPE html>
<html lang="en-US-x-hixie">
<head>
<title>WebVTT: The Web Video Text Tracks Format</title>
<meta charset="utf-8">
<!-- script to register bugs -->
<script src="https://dvcs.w3.org/hg/webcomponents/raw-file/tip/assets/scripts/bug-assist.js"></script>
<meta name="bug.short_desc" content="[WebVTT] ">
<meta name="bug.product" content="TextTracks CG">
<meta name="bug.component" content="WebVTT">
<style>
body {
line-height: 1.35;
}
pre {
white-space: pre-wrap;
}
pre.idl_whatwg {
border: solid 0.0625em;
background: #EEEEEE;
color: black;
padding: 0.5em 1em;
font-family: monospace, Droid Sans Fallback, sans-serif;
}
pre.idl_whatwg::before {
content: 'IDL';
font: bold 0.8em sans-serif;
padding: 0.5em;
position: absolute;
top: auto;
margin: -0.703125em 0 0 -3.75em /* 1em/0.8 + 1.5em + 0.5em*2 */;
width: 1.5em;
background: inherit;
border: 0.078125em;
border-style: solid none solid solid;
border-radius: 1em 0 0 1em;
}
.example {
padding: 0.5em;
margin: 1em 0;
position: relative;
clear: both;
border-left-width: .5em;
border-left-style: solid;
border-color: #e0cb52;
background: #fcfaee;
}
.todo {
color: #E50000;
background: white;
border: solid red;
padding: 0.5em;
margin: 1em 0;
}
.todo::before {
content: " ** ";
position: absolute;
left: 0;
width: 8em;
text-align: right;
}
table {
border-collapse: collapse;
border-style: hidden hidden none hidden;
}
table thead, table tbody {
border-bottom: solid;
}
table td, table th {
border-left: solid;
border-right: solid;
border-bottom: solid thin;
vertical-align: top;
padding: 0.2em;
}
dl.domintro {
margin: 2em 0 2em 0;
padding: 0.5em 1em 0.5em 2em;
border: none;
background: #d9e6f8;
}
dl.domintro:before {
display: table;
margin: -1em -0.5em -0.5em auto;
width: auto;
content: 'This box is non-normative. Implementation requirements are given below this box.';
color: black;
font-style: italic;
border: solid 2px;
background: white;
padding: 0 0.25em;
}
dt {
margin-top: 0.75em;
margin-bottom: 0.25em;
clear: left;
}
/* fix bug entry form styling */
#bug-assist-form {
padding: 4px;
border: 1px solid red;
background-color: rgba(255, 255, 255, 0.6);
position: fixed;
top: 1em;
right: 1em;
width: 115px;
opacity: 0.8;
text-align: right;
}
</style>
<style>/*****************************************************************
* ReSpec 3 CSS
* Robin Berjon - http://berjon.com/
*****************************************************************/
/* --- INLINES --- */
em.rfc2119 {
text-transform: lowercase;
font-variant: small-caps;
font-style: normal;
color: #900;
}
h1 acronym, h2 acronym, h3 acronym, h4 acronym, h5 acronym, h6 acronym, a acronym,
h1 abbr, h2 abbr, h3 abbr, h4 abbr, h5 abbr, h6 abbr, a abbr {
border: none;
}
dfn {
font-weight: bold;
}
a.internalDFN {
color: inherit;
border-bottom: 1px solid #99c;
text-decoration: none;
}
a.externalDFN {
color: inherit;
border-bottom: 1px dotted #ccc;
text-decoration: none;
}
a.bibref {
text-decoration: none;
}
cite .bibref {
font-style: normal;
}
code {
color: #ff4500;
}
/* --- TOC --- */
.toc a, .tof a {
text-decoration: none;
}
a .secno, a .figno {
color: #000;
}
ul.tof, ol.tof {
list-style: none outside none;
}
.caption {
margin-top: 0.5em;
font-style: italic;
}
/* --- TABLE --- */
table.simple {
border-spacing: 0;
border-collapse: collapse;
border-bottom: 3px solid #005a9c;
}
.simple th {
background: #005a9c;
color: #fff;
padding: 3px 5px;
text-align: left;
}
.simple th[scope="row"] {
background: inherit;
color: inherit;
border-top: 1px solid #ddd;
}
.simple td {
padding: 3px 10px;
border-top: 1px solid #ddd;
}
.simple tr:nth-child(even) {
background: #f0f6ff;
}
/* --- DL --- */
.section dd > p:first-child {
margin-top: 0;
}
.section dd > p:last-child {
margin-bottom: 0;
}
.section dd {
margin-bottom: 1em;
}
.section dl.attrs dd, .section dl.eldef dd {
margin-bottom: 0;
}
@media print {
.removeOnSave {
display: none;
}
}
</style><style>/* --- ISSUES/NOTES --- */
div.issue-title, div.note-title {
padding-right: 1em;
min-width: 7.5em;
color: #b9ab2d;
}
div.issue-title { color: #e05252; }
div.note-title { color: #2b2; }
div.issue-title span, div.note-title span {
text-transform: uppercase;
}
div.note, div.issue {
margin-top: 1em;
margin-bottom: 1em;
}
.note > p:first-child, .issue > p:first-child { margin-top: 0 }
.issue, .note {
padding: .5em;
border-left-width: .5em;
border-left-style: solid;
}
div.issue, div.note {
padding: 1em 1.2em 0.5em;
margin: 1em 0;
position: relative;
clear: both;
}
span.note, span.issue { padding: .1em .5em .15em; }
.issue {
border-color: #e05252;
background: #fbe9e9;
}
.note {
border-color: #52e052;
background: #e9fbe9;
}
</style><link rel="stylesheet" href="https://www.w3.org/community/src/css/spec/cg-draft.css"><!--[if lt IE 9]><script src='https://www.w3.org/2008/site/js/html5shiv.js'></script><![endif]--></head>
<body style="" class="h-entry" role="document" id="respecDocument"><div class="head" role="contentinfo" id="respecHeader">
<p>
<a href="http://www.w3.org/"><img width="72" height="48" src="https://www.w3.org/Icons/w3c_home" alt="W3C"></a>
</p>
<h1 class="title p-name" id="title">WebVTT: The Web Video Text Tracks Format</h1>
<h2 id="draft-community-group-specification-16-february-2014">Draft Community Group Specification <time class="dt-published" datetime="2014-02-16">16 February 2014</time></h2>
<dl>
<dt>Latest editor's draft:</dt>
<dd><a href="http://dev.w3.org/html5/webvtt/">http://dev.w3.org/html5/webvtt/</a></dd>
<dt>Editors:</dt>
<dd class="p-author h-card vcard"><a class="u-url url p-name fn" href="mailto:silviapfeiffer1@gmail.com">Silvia Pfeiffer</a>, <a class="p-org org h-org h-card" href="http://nicta.com.au/">NICTA</a></dd>
<dd class="p-author h-card vcard"><a class="u-url url p-name fn" href="mailto:philipj@opera.com">Philip Jägenstedt</a>, <a class="p-org org h-org h-card" href="http://www.opera.com/">Opera Software ASA</a></dd>
<dd class="p-author h-card vcard"><a class="u-url url p-name fn" href="mailto:ian@hixie.ch">Ian Hickson</a>, <a class="p-org org h-org h-card" href="http://google.com/">Google</a> (previous editor)</dd>
</dl>
<p class="copyright">
<a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> ©
2011-2014
the Contributors to the WebVTT: The Web Video Text Tracks Format Specification, published by the
<a href="http://www.w3.org/community/texttracks/">Text Tracks Community Group</a> under the
<a href="https://www.w3.org/community/about/agreements/cla/">W3C Community Contributor License Agreement (CLA)</a>.
A human-readable <a href="http://www.w3.org/community/about/agreements/cla-deed/">summary</a> is available.
</p>
<hr>
</div>
<section id="abstract" class="introductory" property="dcterms:abstract" datatype=""><h2 aria-level="1" role="heading" id="h2_abstract">Abstract</h2>
<p>This is the specification of WebVTT, the Web Video Text Tracks format.
</p>
<p>If you wish to make comments or file bugs regarding this document in a manner
that is tracked by the W3C, please submit them via <a href="http://www.w3.org/Bugs/Public/enter_bug.cgi?product=TextTracks%20CG&component=WebVTT&short_desc=%5BWebVTT%5D%20">our
public bug database</a>.</p>
</section><section id="sotd" class="introductory"><h2 aria-level="1" role="heading" id="h2_sotd">Status of This Document</h2>
<p>
This specification was published by the <a href="http://www.w3.org/community/texttracks/">Text Tracks Community Group</a>.
It is not a W3C Standard nor is it on the W3C Standards Track.
Please note that under the
<a href="https://www.w3.org/community/about/agreements/cla/">W3C Community Contributor License Agreement (CLA)</a>
there is a limited opt-out and other conditions apply.
Learn more about
<a href="http://www.w3.org/community/">W3C Community and Business Groups</a>.
</p>
<p>This specification is being developed as a Living Specification. There is a plan to take a snapshot and publish it as a W3C Recommendation through the <a href="http://www.w3.org/AudioVideo/TT/">W3C Timed Text Working Group</a>.
</p>
</section><section id="toc"><h2 class="introductory" aria-level="1" role="heading" id="h2_toc">Table of Contents</h2><ul class="toc" role="directory" id="respecContents"><li class="tocline"><a href="#introduction" class="tocxref"><span class="secno">1. </span>Introduction</a><ul class="toc"><li class="tocline"><a href="#cues-with-multiple-lines" class="tocxref"><span class="secno">1.1 </span>Cues with multiple lines</a></li><li class="tocline"><a href="#comments" class="tocxref"><span class="secno">1.2 </span>Comments</a></li><li class="tocline"><a href="#other-features" class="tocxref"><span class="secno">1.3 </span>Other features</a></li></ul></li><li class="tocline"><a href="#conformance" class="tocxref"><span class="secno">2. </span>Conformance</a><ul class="toc"><li class="tocline"><a href="#dependencies" class="tocxref"><span class="secno">2.1 </span>Dependencies</a></li></ul></li><li class="tocline"><a href="#data-model" class="tocxref"><span class="secno">3. </span>Data model</a><ul class="toc"><li lass="tocline"><a href="#text-track-cues" class="tocxref"><span class="secno">3.1 </span>Text Track Cues</a></li><li class="tocline"><a href="#text-track-regions" class="tocxref"><span class="secno">3.2 </span>Text Track Regions</a></li></ul></li><li class="tocline"><a href="#the-webvtt-file-format-syntax" class="tocxref"><span class="secno">4. </span>The WebVTT file format: Syntax</a><ul class="toc"><li class="tocline"><a href="#webvtt-file-structure" class="tocxref"><span class="secno">4.1 </span>WebVTT file structure</a></li><li class="tocline"><a href="#webvtt-comments" class="tocxref"><span class="secno">4.2 </span>WebVTT comments</a></li><li class="tocline"><a href="#types-of-webvtt-cue-payload" class="tocxref"><span class="secno">4.3 </span>Types of WebVTT cue payload</a><ul class="toc"><li class="tocline"><a href="#webvtt-metadata-text" class="tocxref"><span class="secno">4.3.1 </span>WebVTT metadata text</a></li><li class="tocline"><a href="#webvtt-cue-text" class="tocxref"><span class="secno">4.3. </span>WebVTT cue text</a></li></ul></li><li class="tocline"><a href="#webvtt-cue-settings" class="tocxref"><span class="secno">4.4 </span>WebVTT cue settings</a><ul class="toc"><li class="tocline"><a href="#webvtt-region-definition" class="tocxref"><span class="secno">4.4.1 </span>WebVTT region definition</a></li><li class="tocline"><a href="#webvtt-cue-settings-1" class="tocxref"><span class="secno">4.4.2 </span>WebVTT cue settings</a></li></ul></li><li class="tocline"><a href="#properties-of-cue-sequences" class="tocxref"><span class="secno">4.5 </span>Properties of cue sequences</a><ul class="toc"><li class="tocline"><a href="#webvtt-file-using-only-nested-cues" class="tocxref"><span class="secno">4.5.1 </span>WebVTT file using only nested cues</a></li></ul></li><li class="tocline"><a href="#types-of-webvtt-files" class="tocxref"><span class="secno">4.6 </span>Types of WebVTT files</a><ul class="toc"><li class="tocline"><a href="#webvtt-file-using-metadata-content" class="tocxref"><span class="secno">46.1 </span>WebVTT file using metadata content</a></li><li class="tocline"><a href="#webvtt-file-using-chapter-title-text" class="tocxref"><span class="secno">4.6.2 </span>WebVTT file using chapter title text</a></li><li class="tocline"><a href="#webvtt-file-using-cue-text" class="tocxref"><span class="secno">4.6.3 </span>WebVTT file using cue text</a></li></ul></li></ul></li><li class="tocline"><a href="#webvtt-file-format-parsing" class="tocxref"><span class="secno">5. </span>WebVTT file format: Parsing</a><ul class="toc"><li class="tocline"><a href="#webvtt-file-parsing" class="tocxref"><span class="secno">5.1 </span>WebVTT file parsing</a></li><li class="tocline"><a href="#webvtt-region-settings-parsing" class="tocxref"><span class="secno">5.2 </span>WebVTT region settings parsing</a></li><li class="tocline"><a href="#webvtt-cue-timings-and-settings-parsing" class="tocxref"><span class="secno">5.3 </span>WebVTT cue timings and settings parsing</a></li><li class="tocline"><a href="#webvtt-cue-text-parsingrules" class="tocxref"><span class="secno">5.4 </span><span>WebVTT cue text parsing rules</span></a></li><li class="tocline"><a href="#webvtt-cue-text-dom-construction-rules" class="tocxref"><span class="secno">5.5 </span><span>WebVTT cue text DOM construction rules</span></a></li></ul></li><li class="tocline"><a href="#rendering" class="tocxref"><span class="secno">6. </span>Rendering</a><ul class="toc"><li class="tocline"><a href="#cues-in-isolation" class="tocxref"><span class="secno">6.1 </span>Cues in isolation</a></li><li class="tocline"><a href="#cues-with-video" class="tocxref"><span class="secno">6.2 </span>Cues with video</a><ul class="toc"><li class="tocline"><a href="#processing-model" class="tocxref"><span class="secno">6.2.1 </span>Processing model</a></li><li class="tocline"><a href="#applying-css-properties-to-webvtt-node-objects" class="tocxref"><span class="secno">6.2.2 </span>Applying CSS properties to <span title="WebVTT Node Object" class="formerLink">WebVTT Node Objects</span></a></li>li class="tocline"><a href="#css-extensions" class="tocxref"><span class="secno">6.2.3 </span>CSS extensions</a><ul class="toc"><li class="tocline"><a href="#the-cue-pseudo-element" class="tocxref"><span class="secno">6.2.3.1 </span>The '::cue' pseudo-element</a></li><li class="tocline"><a href="#the-past-and-future-pseudo-classes" class="tocxref"><span class="secno">6.2.3.2 </span>The ':past' and ':future' pseudo-classes</a></li><li class="tocline"><a href="#the-cue-region-pseudo-element" class="tocxref"><span class="secno">6.2.3.3 </span>The '::cue-region' pseudo-element</a></li></ul></li></ul></li></ul></li><li class="tocline"><a href="#webvtt-api-for-browsers" class="tocxref"><span class="secno">7. </span>WebVTT API for Browsers</a><ul class="toc"><li class="tocline"><a href="#vttcue-interface" class="tocxref"><span class="secno">7.1 </span>VTTCue interface</a></li><li class="tocline"><a href="#vttregion-interface" class="tocxref"><span class="secno">7.2 </span>VTTRegion interface</a></li></ul></li><li lass="tocline"><a href="#iana-considerations" class="tocxref"><span class="secno">8. </span>IANA considerations</a><ul class="toc"><li class="tocline"><a href="#text-vtt" class="tocxref"><span class="secno">8.1 </span><span><code>text/vtt</code></span></a></li></ul></li><li class="tocline"><a href="#references-1" class="tocxref"><span class="secno">9. </span>References</a></li><li class="tocline"><a href="#acknowledgements" class="tocxref"><span class="secno">10. </span>Acknowledgements</a></li></ul></section>
<section id="introduction">
<!--OddPage--><h2 aria-level="1" role="heading" id="h2_introduction"><span class="secno">1. </span>Introduction</h2>
<p><i>This section is non-normative.</i></p>
<p>The <dfn id="dfn-webvtt">WebVTT</dfn> (Web Video Text Tracks) format is
intended for marking up external text track resources.</p>
<p>The main use for WebVTT files is captioning video content. Here
is a sample file that captions an interview:</p>
<pre>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: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.</pre>
<section id="cues-with-multiple-lines">
<h3 aria-level="2" role="heading" id="h3_cues-with-multiple-lines"><span class="secno">1.1 </span>Cues with multiple lines</h3>
<p><i>This section is non-normative.</i></p>
<p>Line breaks in cues are honored. User agents will also insert extra line breaks if necessary to
fit the cue in the cue's width. In general, therefore, authors are encouraged to write cues all on
one line except when a line break is definitely necessary, and to not manually line-wrap for
aesthetic reasons alone.</p>
<div class="example">
[5139 lines skipped]
Received on Wednesday, 19 February 2014 08:18:06 UTC