- From: CVS User spfeiffe <cvsmail@w3.org>
- Date: Mon, 08 Jul 2013 06:51:45 +0000
- To: public-html-commits@w3.org
Update of /sources/public/html5/webvtt
In directory roscoe:/tmp/cvs-serv5658
Added Files:
webvtt-July2013.html
Log Message:
added WebVTT snapshot for July 2013
--- /sources/public/html5/webvtt/webvtt-July2013.html 2013/07/08 06:51:45 NONE
+++ /sources/public/html5/webvtt/webvtt-July2013.html 2013/07/08 06:51:45 1.1
<!DOCTYPE html>
<html lang="en-US-x-hixie">
<head>
<meta charset="ascii">
<title>WebVTT: The Web Video Text Tracks Format</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<!-- local copy:
<script src='../../respec/js/require.js' data-main='../../respec/js/profile-w3c-common' async class='remove'></script>
-->
<!-- remote copy: -->
<!-- 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 */
body > form {
padding: 4px;
border: 1px solid red;
background-color: white;
}
</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;
}
</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"></head>
<!-- v2 feature requests:
Explicitly allow random comments on the line after the
signature line, for metadata, copyrights, etc.
Inline CSS, maybe as below. See http://www.w3.org/Bugs/Public/show_bug.cgi?id=15023
STYLE
::cue(.narration) { color: blue; }
Default settings, maybe as below. See http://www.w3.org/Bugs/Public/show_bug.cgi?id=15024
DEFAULTS
line:-1 align:middle size:50%
-->
<body class="h-entry"><div class="head">
<p>
<a href="http://www.w3.org/"><img width="72" height="48" src="http://www.w3.org/Icons/w3c_home" alt="W3C"></a>
</p>
<h1 class="title" id="title">WebVTT: The Web Video Text Tracks Format</h1>
<h2 id="draft-community-group-specification-08-july-2013">Draft Community Group Specification <time class="dt-published" datetime="2013-07-08">08 July 2013</time></h2>
<dl>
<dt>Latest editor's draft:</dt>
<dd><a href="https://dvcs.w3.org/hg/text-tracks/raw-file/default/webvtt/webvtt.html">https://dvcs.w3.org/hg/text-tracks/raw-file/default/webvtt/webvtt.html</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></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-2013
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"><h2>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>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 was originally created by the WHATWG as a Living Standard and last published at <a href="http://dev.w3.org/html5/webvtt/">http://dev.w3.org/html5/webvtt/</a>.
</p>
</section><section id="toc"><h2 class="introductory">Table of Contents</h2><ul class="toc"><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 class="tocline"><a href="#text-track-cues" class="tocxref"><span class="secno">.1 </span>Text Track Cues</a></li><li class="tocline"><a href="#text-track-region" class="tocxref"><span class="secno">3.2 </span>Text Track Region</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.2 </span>WebVTT cue text</a></li></ul></li><li class="tocline"><a href="#webvtt-ce-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">4.6.1 </span>WebVTT file using metadata content</a></li><li class="tocline"><a hre="#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-parsing-rules" class="tocxref"><span class="secno">5.4 </span><span>WebVTT cue text parsng 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="#extension-of-the-texttrack-interface-for-region-support" class="tocxref"><span class="secno">7.2 </span>Extension of the TextTrack interface for region support</a></li><li class="tocline"><a ref="#texttrackregion-interface" class="tocxref"><span class="secno">7.3 </span>TextTrackRegion interface</a></li><li class="tocline"><a href="#texttrackregionlist-interface" class="tocxref"><span class="secno">7.4 </span>TextTrackRegionList interface</a></li></ul></li><li class="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><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><span class="secno">1.1 </span>Cues with multiple lines</h3>
<p><i>This section is non-normative.</i></p>
[5038 lines skipped]
Received on Monday, 8 July 2013 06:51:48 UTC