[html5] r6183 - [e] (0) A first attempt at an example for a WebVTT file. Fixing http://www.w3.or [...]

whatwg at whatwg.org whatwg at whatwg.org
Thu Jun 2 18:21:44 PDT 2011


Author: ianh
Date: 2011-06-02 18:21:42 -0700 (Thu, 02 Jun 2011)
New Revision: 6183

Modified:
   complete.html
   index
   source
Log:
[e] (0) A first attempt at an example for a WebVTT file.
Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=12192

Modified: complete.html
===================================================================
--- complete.html	2011-06-03 00:48:48 UTC (rev 6182)
+++ complete.html	2011-06-03 01:21:42 UTC (rev 6183)
@@ -592,10 +592,11 @@
          <li><a href=#cue-events><span class=secno>4.8.10.12.6 </span>Event definitions</a></ol></li>
        <li><a href=#webvtt-0><span class=secno>4.8.10.13 </span>WebVTT</a>
         <ol>
-         <li><a href=#syntax-0><span class=secno>4.8.10.13.1 </span>Syntax</a></li>
-         <li><a href=#parsing-0><span class=secno>4.8.10.13.2 </span>Parsing</a></li>
-         <li><a href=#webvtt-cue-text-parsing-rules><span class=secno>4.8.10.13.3 </span>WebVTT cue text parsing rules</a></li>
-         <li><a href=#webvtt-cue-text-dom-construction-rules><span class=secno>4.8.10.13.4 </span>WebVTT cue text DOM construction rules</a></ol></li>
+         <li><a href=#introduction-1><span class=secno>4.8.10.13.1 </span>Introduction</a></li>
+         <li><a href=#syntax-0><span class=secno>4.8.10.13.2 </span>Syntax</a></li>
+         <li><a href=#parsing-0><span class=secno>4.8.10.13.3 </span>Parsing</a></li>
+         <li><a href=#webvtt-cue-text-parsing-rules><span class=secno>4.8.10.13.4 </span>WebVTT cue text parsing rules</a></li>
+         <li><a href=#webvtt-cue-text-dom-construction-rules><span class=secno>4.8.10.13.5 </span>WebVTT cue text DOM construction rules</a></ol></li>
        <li><a href=#user-interface><span class=secno>4.8.10.14 </span>User interface</a></li>
        <li><a href=#time-ranges><span class=secno>4.8.10.15 </span>Time ranges</a></li>
        <li><a href=#mediaevents><span class=secno>4.8.10.16 </span>Event summary</a></li>
@@ -654,7 +655,7 @@
      <li><a href=#examples-0><span class=secno>4.9.13 </span>Examples</a></ol></li>
    <li><a href=#forms><span class=secno>4.10 </span>Forms</a>
     <ol>
-     <li><a href=#introduction-1><span class=secno>4.10.1 </span>Introduction</a>
+     <li><a href=#introduction-2><span class=secno>4.10.1 </span>Introduction</a>
       <ol>
        <li><a href="#writing-a-form's-user-interface"><span class=secno>4.10.1.1 </span>Writing a form's user interface</a></li>
        <li><a href=#implementing-the-server-side-processing-for-a-form><span class=secno>4.10.1.2 </span>Implementing the server-side processing for a form</a></li>
@@ -736,7 +737,7 @@
        <li><a href=#security-forms><span class=secno>4.10.21.4 </span>Security</a></ol></li>
      <li><a href=#form-submission><span class=secno>4.10.22 </span>Form submission</a>
       <ol>
-       <li><a href=#introduction-2><span class=secno>4.10.22.1 </span>Introduction</a></li>
+       <li><a href=#introduction-3><span class=secno>4.10.22.1 </span>Introduction</a></li>
        <li><a href=#implicit-submission><span class=secno>4.10.22.2 </span>Implicit submission</a></li>
        <li><a href=#form-submission-algorithm><span class=secno>4.10.22.3 </span>Form submission algorithm</a></li>
        <li><a href=#constructing-form-data-set><span class=secno>4.10.22.4 </span>Constructing the form data set</a></li>
@@ -768,7 +769,7 @@
        <li><a href=#using-the-accesskey-attribute-to-define-a-command-on-other-elements><span class=secno>4.11.5.8 </span>Using the <code title=attr-accesskey>accesskey</code> attribute to define a command on other elements</a></ol></ol></li>
    <li><a href=#links><span class=secno>4.12 </span>Links</a>
     <ol>
-     <li><a href=#introduction-3><span class=secno>4.12.1 </span>Introduction</a></li>
+     <li><a href=#introduction-4><span class=secno>4.12.1 </span>Introduction</a></li>
      <li><a href=#links-created-by-a-and-area-elements><span class=secno>4.12.2 </span>Links created by <code>a</code> and <code>area</code> elements</a></li>
      <li><a href=#following-hyperlinks><span class=secno>4.12.3 </span>Following hyperlinks</a>
       <ol>
@@ -808,7 +809,7 @@
      <li><a href=#pseudo-classes><span class=secno>4.14.2 </span>Pseudo-classes</a></ol></ol></li>
  <li><a href=#microdata><span class=secno>5 </span>Microdata</a>
   <ol>
-   <li><a href=#introduction-4><span class=secno>5.1 </span>Introduction</a>
+   <li><a href=#introduction-5><span class=secno>5.1 </span>Introduction</a>
     <ol>
      <li><a href=#overview><span class=secno>5.1.1 </span>Overview</a></li>
      <li><a href=#the-basic-syntax><span class=secno>5.1.2 </span>The basic syntax</a></li>
@@ -898,7 +899,7 @@
      <li><a href=#aborting-a-document-load><span class=secno>6.5.11 </span>Aborting a document load</a></ol></li>
    <li><a href=#offline><span class=secno>6.6 </span>Offline Web applications</a>
     <ol>
-     <li><a href=#introduction-5><span class=secno>6.6.1 </span>Introduction</a>
+     <li><a href=#introduction-6><span class=secno>6.6.1 </span>Introduction</a>
       <ol>
        <li><a href=#appcacheevents><span class=secno>6.6.1.1 </span>Event summary</a></ol></li>
      <li><a href=#appcache><span class=secno>6.6.2 </span>Application caches</a></li>
@@ -918,7 +919,7 @@
   <ol>
    <li><a href=#scripting><span class=secno>7.1 </span>Scripting</a>
     <ol>
-     <li><a href=#introduction-6><span class=secno>7.1.1 </span>Introduction</a></li>
+     <li><a href=#introduction-7><span class=secno>7.1.1 </span>Introduction</a></li>
      <li><a href=#enabling-and-disabling-scripting><span class=secno>7.1.2 </span>Enabling and disabling scripting</a></li>
      <li><a href=#processing-model-1><span class=secno>7.1.3 </span>Processing model</a>
       <ol>
@@ -968,7 +969,7 @@
      <li><a href=#element-level-focus-apis><span class=secno>8.3.4 </span>Element-level focus APIs</a></ol></li>
    <li><a href=#assigning-keyboard-shortcuts><span class=secno>8.4 </span>Assigning keyboard shortcuts</a>
     <ol>
-     <li><a href=#introduction-7><span class=secno>8.4.1 </span>Introduction</a></li>
+     <li><a href=#introduction-8><span class=secno>8.4.1 </span>Introduction</a></li>
      <li><a href=#the-accesskey-attribute><span class=secno>8.4.2 </span>The <code>accesskey</code> attribute</a></li>
      <li><a href=#processing-model-3><span class=secno>8.4.3 </span>Processing model</a></ol></li>
    <li><a href=#contenteditable><span class=secno>8.5 </span>The <code title=attr-contenteditable>contenteditable</code> attribute</a>
@@ -978,7 +979,7 @@
    <li><a href=#spelling-and-grammar-checking><span class=secno>8.6 </span>Spelling and grammar checking</a></li>
    <li><a href=#dnd><span class=secno>8.7 </span>Drag and drop</a>
     <ol>
-     <li><a href=#introduction-8><span class=secno>8.7.1 </span>Introduction</a></li>
+     <li><a href=#introduction-9><span class=secno>8.7.1 </span>Introduction</a></li>
      <li><a href=#the-drag-data-store><span class=secno>8.7.2 </span>The drag data store</a></li>
      <li><a href=#the-datatransfer-interface><span class=secno>8.7.3 </span>The <code>DataTransfer</code> interface</a>
       <ol>
@@ -1001,7 +1002,7 @@
    <li><a href=#editing-apis><span class=secno>8.9 </span>Editing APIs</a></ol></li>
  <li><a href=#video-conferencing-and-peer-to-peer-communication><span class=secno>9 </span>Video conferencing and peer-to-peer communication</a>
   <ol>
-   <li><a href=#introduction-9><span class=secno>9.1 </span>Introduction</a></li>
+   <li><a href=#introduction-10><span class=secno>9.1 </span>Introduction</a></li>
    <li><a href=#obtaining-local-multimedia-content><span class=secno>9.2 </span>Obtaining local multimedia content</a></li>
    <li><a href=#stream-api><span class=secno>9.3 </span>Stream API</a></li>
    <li><a href=#peer-to-peer-connections><span class=secno>9.4 </span>Peer-to-peer connections</a></li>
@@ -1013,7 +1014,7 @@
    <li><a href=#event-summary><span class=secno>9.8 </span>Event Summary</a></ol></li>
  <li><a href=#workers><span class=secno>10 </span>Web workers</a>
   <ol>
-   <li><a href=#introduction-10><span class=secno>10.1 </span>Introduction</a>
+   <li><a href=#introduction-11><span class=secno>10.1 </span>Introduction</a>
     <ol>
      <li><a href=#scope-0><span class=secno>10.1.1 </span>Scope</a></li>
      <li><a href=#tutorial><span class=secno>10.1.2 </span>Tutorial</a>
@@ -1074,7 +1075,7 @@
        <li><a href=#garbage-collection-2><span class=secno>11.3.3.2 </span>Garbage collection</a></ol></ol></li>
    <li><a href=#web-messaging><span class=secno>11.4 </span>Cross-document messaging</a>
     <ol>
-     <li><a href=#introduction-11><span class=secno>11.4.1 </span>Introduction</a></li>
+     <li><a href=#introduction-12><span class=secno>11.4.1 </span>Introduction</a></li>
      <li><a href=#security-postmsg><span class=secno>11.4.2 </span>Security</a>
       <ol>
        <li><a href=#authors><span class=secno>11.4.2.1 </span>Authors</a></li>
@@ -1082,14 +1083,14 @@
      <li><a href=#posting-messages><span class=secno>11.4.3 </span>Posting messages</a></ol></li>
    <li><a href=#channel-messaging><span class=secno>11.5 </span>Channel messaging</a>
     <ol>
-     <li><a href=#introduction-12><span class=secno>11.5.1 </span>Introduction</a></li>
+     <li><a href=#introduction-13><span class=secno>11.5.1 </span>Introduction</a></li>
      <li><a href=#message-channels><span class=secno>11.5.2 </span>Message channels</a></li>
      <li><a href=#message-ports><span class=secno>11.5.3 </span>Message ports</a>
       <ol>
        <li><a href=#ports-and-garbage-collection><span class=secno>11.5.3.1 </span>Ports and garbage collection</a></ol></ol></ol></li>
  <li><a href=#webstorage><span class=secno>12 </span>Web storage</a>
   <ol>
-   <li><a href=#introduction-13><span class=secno>12.1 </span>Introduction</a></li>
+   <li><a href=#introduction-14><span class=secno>12.1 </span>Introduction</a></li>
    <li><a href=#storage><span class=secno>12.2 </span>The API</a>
     <ol>
      <li><a href=#the-storage-interface><span class=secno>12.2.1 </span>The <code>Storage</code> interface</a></li>
@@ -1268,10 +1269,10 @@
    <li><a href=#parsing-xhtml-fragments><span class=secno>14.4 </span>Parsing XHTML fragments</a></ol></li>
  <li><a href=#rendering><span class=secno>15 </span>Rendering</a>
   <ol>
-   <li><a href=#introduction-14><span class=secno>15.1 </span>Introduction</a></li>
+   <li><a href=#introduction-15><span class=secno>15.1 </span>Introduction</a></li>
    <li><a href=#the-css-user-agent-style-sheet-and-presentational-hints><span class=secno>15.2 </span>The CSS user agent style sheet and presentational hints</a>
     <ol>
-     <li><a href=#introduction-15><span class=secno>15.2.1 </span>Introduction</a></li>
+     <li><a href=#introduction-16><span class=secno>15.2.1 </span>Introduction</a></li>
      <li><a href=#display-types><span class=secno>15.2.2 </span>Display types</a></li>
      <li><a href=#margins-and-padding><span class=secno>15.2.3 </span>Margins and padding</a></li>
      <li><a href=#alignment><span class=secno>15.2.4 </span>Alignment</a></li>
@@ -1297,7 +1298,7 @@
      <li><a href=#toolbars-0><span class=secno>15.3.6 </span>Toolbars</a></ol></li>
    <li><a href=#bindings><span class=secno>15.4 </span>Bindings</a>
     <ol>
-     <li><a href=#introduction-16><span class=secno>15.4.1 </span>Introduction</a></li>
+     <li><a href=#introduction-17><span class=secno>15.4.1 </span>Introduction</a></li>
      <li><a href=#the-button-element-0><span class=secno>15.4.2 </span>The <code>button</code> element</a></li>
      <li><a href=#the-details-element-0><span class=secno>15.4.3 </span>The <code>details</code> element</a></li>
      <li><a href=#the-input-element-as-a-text-entry-widget><span class=secno>15.4.4 </span>The <code>input</code> element as a text entry widget</a></li>
@@ -31885,8 +31886,55 @@
   -->
 
 
-  <h6 id=syntax-0><span class=secno>4.8.10.13.1 </span>Syntax</h6>
+  <h6 id=introduction-1><span class=secno>4.8.10.13.1 </span>Introduction</h6>
 
+  <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 A:end S:50%
+<v Roger Bingham>When we e-mailed—
+
+00:30.500 --> 00:32.500 A:start S:50%
+<v Neil DeGrass Tyson>Didn't we talk about enough in that conversation?
+
+00:32.000 --> 00:35.500 A:end S:50%
+<v Roger Bingham>No! No no no no; 'cos 'cos obviously 'cos
+
+00:32.500 --> 00:33.500 A:start S:50%
+<v Neil DeGrass 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>
+
+
+  <h6 id=syntax-0><span class=secno>4.8.10.13.2 </span>Syntax</h6>
+
   <p>A <dfn id=webvtt-file>WebVTT file</dfn> must consist of a <a href=#webvtt-file-body>WebVTT file
   body</a> encoded as UTF-8 and labeled with the <a href=#mime-type>MIME
   type</a> <code><a href=#text/vtt>text/vtt</a></code>. <a href=#refsRFC3629>[RFC3629]</a></p>
@@ -32243,7 +32291,7 @@
 
   <div class=impl>
 
-  <h6 id=parsing-0><span class=secno>4.8.10.13.2 </span>Parsing</h6>
+  <h6 id=parsing-0><span class=secno>4.8.10.13.3 </span>Parsing</h6>
 
   <p>A <dfn id=webvtt-parser>WebVTT parser</dfn>, given an input byte stream and a
   <a href=#text-track-list-of-cues>text track list of cues</a> <var title="">output</var>,
@@ -32878,7 +32926,7 @@
 
    <li><p>Return <var title="">result</var>.</li>
 
-  </ol><h6 id=webvtt-cue-text-parsing-rules><span class=secno>4.8.10.13.3 </span><dfn>WebVTT cue text parsing rules</dfn></h6>
+  </ol><h6 id=webvtt-cue-text-parsing-rules><span class=secno>4.8.10.13.4 </span><dfn>WebVTT cue text parsing rules</dfn></h6>
 
   <p>A <dfn id=webvtt-node-object>WebVTT Node Object</dfn> is a conceptual construct used to
   represent components of <a href=#webvtt-cue-text>WebVTT cue text</a> so that its
@@ -33480,7 +33528,7 @@
 
    <li><p>Jump to the step labeled <i>loop</i>.</li>
 
-  </ol><h6 id=webvtt-cue-text-dom-construction-rules><span class=secno>4.8.10.13.4 </span><dfn>WebVTT cue text DOM construction rules</dfn></h6>
+  </ol><h6 id=webvtt-cue-text-dom-construction-rules><span class=secno>4.8.10.13.5 </span><dfn>WebVTT cue text DOM construction rules</dfn></h6>
 
   <p>To convert a <a href=#list-of-webvtt-node-objects>List of WebVTT Node Objects</a> to a DOM
   tree for <code><a href=#document>Document</a></code> <var title="">owner</var>, user
@@ -41092,7 +41140,7 @@
          <td> 11.6% <td> 12.3% <td> 12.6%
   </table><h3 id=forms><span class=secno>4.10 </span>Forms</h3>
 
-  <h4 id=introduction-1><span class=secno>4.10.1 </span>Introduction</h4>
+  <h4 id=introduction-2><span class=secno>4.10.1 </span>Introduction</h4>
 
   <p><i>This section is non-normative.</i></p>
 
@@ -51389,7 +51437,7 @@
 
   <div class=impl>
 
-  <h5 id=introduction-2><span class=secno>4.10.22.1 </span>Introduction</h5>
+  <h5 id=introduction-3><span class=secno>4.10.22.1 </span>Introduction</h5>
 
   </div>
 
@@ -53626,7 +53674,7 @@
 
   <h3 id=links><span class=secno>4.12 </span>Links</h3>
 
-  <h4 id=introduction-3><span class=secno>4.12.1 </span>Introduction</h4>
+  <h4 id=introduction-4><span class=secno>4.12.1 </span>Introduction</h4>
 
   <p>Links are a conceptual construct, created by <code><a href=#the-a-element>a</a></code>,
   <code><a href=#the-area-element>area</a></code>, and <code><a href=#the-link-element>link</a></code> elements, that <a href=#represents title=represents>represent</a> a connection between two
@@ -55768,7 +55816,7 @@
 -->
 
 
-  <h3 id=introduction-4><span class=secno>5.1 </span>Introduction</h3>
+  <h3 id=introduction-5><span class=secno>5.1 </span>Introduction</h3>
 
   <h4 id=overview><span class=secno>5.1.1 </span>Overview</h4>
 
@@ -64620,7 +64668,7 @@
 
   -->
 
-  <h4 id=introduction-5><span class=secno>6.6.1 </span>Introduction</h4>
+  <h4 id=introduction-6><span class=secno>6.6.1 </span>Introduction</h4>
 
   <p><i>This section is non-normative.</i></p>
 
@@ -66741,7 +66789,7 @@
 
   <h3 id=scripting><span class=secno>7.1 </span>Scripting</h3>
 
-  <h4 id=introduction-6><span class=secno>7.1.1 </span>Introduction</h4>
+  <h4 id=introduction-7><span class=secno>7.1.1 </span>Introduction</h4>
 
   <p>Various mechanisms can cause author-provided executable code to
   run in the context of a document. These mechanisms include, but are
@@ -70165,7 +70213,7 @@
 
   <h3 id=assigning-keyboard-shortcuts><span class=secno>8.4 </span>Assigning keyboard shortcuts</h3>
 
-  <h4 id=introduction-7><span class=secno>8.4.1 </span>Introduction</h4>
+  <h4 id=introduction-8><span class=secno>8.4.1 </span>Introduction</h4>
 
   <p><i>This section is non-normative.</i></p>
 
@@ -70973,7 +71021,7 @@
   </div>
 
 
-  <h4 id=introduction-8><span class=secno>8.7.1 </span>Introduction</h4>
+  <h4 id=introduction-9><span class=secno>8.7.1 </span>Introduction</h4>
 
   <p><i>This section is non-normative.</i></p>
 
@@ -74098,7 +74146,7 @@
 
   <h2 id=video-conferencing-and-peer-to-peer-communication><span class=secno>9 </span>Video conferencing and peer-to-peer communication</h2>
 
-  <h3 id=introduction-9><span class=secno>9.1 </span>Introduction</h3>
+  <h3 id=introduction-10><span class=secno>9.1 </span>Introduction</h3>
 
   <p><i>This section is non-normative.</i></p>
 
@@ -75936,7 +75984,7 @@
 
 
 
-  <h3 id=introduction-10><span class=secno>10.1 </span>Introduction</h3>
+  <h3 id=introduction-11><span class=secno>10.1 </span>Introduction</h3>
 
   <h4 id=scope-0><span class=secno>10.1.1 </span>Scope</h4>
 
@@ -79646,7 +79694,7 @@
   </div>
 
 
-  <h4 id=introduction-11><span class=secno>11.4.1 </span>Introduction</h4>
+  <h4 id=introduction-12><span class=secno>11.4.1 </span>Introduction</h4>
 
   <p><i>This section is non-normative.</i></p>
 
@@ -79885,7 +79933,7 @@
 
   <h3 id=channel-messaging><span class=secno>11.5 </span><dfn>Channel messaging</dfn></h3>
 
-  <h4 id=introduction-12><span class=secno>11.5.1 </span>Introduction</h4>
+  <h4 id=introduction-13><span class=secno>11.5.1 </span>Introduction</h4>
 
   <p><i>This section is non-normative.</i></p>
 
@@ -80342,7 +80390,7 @@
 
 
 
-  <h3 id=introduction-13><span class=secno>12.1 </span>Introduction</h3>
+  <h3 id=introduction-14><span class=secno>12.1 </span>Introduction</h3>
 
   <p><i>This section is non-normative.</i></p>
 
@@ -90489,7 +90537,7 @@
   "must".</i></p>
 
 
-  <h3 id=introduction-14><span class=secno>15.1 </span>Introduction</h3>
+  <h3 id=introduction-15><span class=secno>15.1 </span>Introduction</h3>
 
   <p>In general, user agents are expected to support CSS, and many of
   the suggestions in this section are expressed in CSS terms. User
@@ -90527,7 +90575,7 @@
 
   <h3 id=the-css-user-agent-style-sheet-and-presentational-hints><span class=secno>15.2 </span>The CSS user agent style sheet and presentational hints</h3>
 
-  <h4 id=introduction-15><span class=secno>15.2.1 </span>Introduction</h4>
+  <h4 id=introduction-16><span class=secno>15.2.1 </span>Introduction</h4>
 
   <p>The CSS rules given in these subsections are, except where
   otherwise specified, expected to be used as part of the user-agent
@@ -92658,7 +92706,7 @@
 
   <h3 id=bindings><span class=secno>15.4 </span>Bindings</h3>
 
-  <h4 id=introduction-16><span class=secno>15.4.1 </span>Introduction</h4>
+  <h4 id=introduction-17><span class=secno>15.4.1 </span>Introduction</h4>
 
   <p>A number of elements have their rendering defined in terms of the
   'binding' property. <a href=#refsBECSS>[BECSS]</a></p>

Modified: index
===================================================================
--- index	2011-06-03 00:48:48 UTC (rev 6182)
+++ index	2011-06-03 01:21:42 UTC (rev 6183)
@@ -592,10 +592,11 @@
          <li><a href=#cue-events><span class=secno>4.8.10.12.6 </span>Event definitions</a></ol></li>
        <li><a href=#webvtt-0><span class=secno>4.8.10.13 </span>WebVTT</a>
         <ol>
-         <li><a href=#syntax-0><span class=secno>4.8.10.13.1 </span>Syntax</a></li>
-         <li><a href=#parsing-0><span class=secno>4.8.10.13.2 </span>Parsing</a></li>
-         <li><a href=#webvtt-cue-text-parsing-rules><span class=secno>4.8.10.13.3 </span>WebVTT cue text parsing rules</a></li>
-         <li><a href=#webvtt-cue-text-dom-construction-rules><span class=secno>4.8.10.13.4 </span>WebVTT cue text DOM construction rules</a></ol></li>
+         <li><a href=#introduction-1><span class=secno>4.8.10.13.1 </span>Introduction</a></li>
+         <li><a href=#syntax-0><span class=secno>4.8.10.13.2 </span>Syntax</a></li>
+         <li><a href=#parsing-0><span class=secno>4.8.10.13.3 </span>Parsing</a></li>
+         <li><a href=#webvtt-cue-text-parsing-rules><span class=secno>4.8.10.13.4 </span>WebVTT cue text parsing rules</a></li>
+         <li><a href=#webvtt-cue-text-dom-construction-rules><span class=secno>4.8.10.13.5 </span>WebVTT cue text DOM construction rules</a></ol></li>
        <li><a href=#user-interface><span class=secno>4.8.10.14 </span>User interface</a></li>
        <li><a href=#time-ranges><span class=secno>4.8.10.15 </span>Time ranges</a></li>
        <li><a href=#mediaevents><span class=secno>4.8.10.16 </span>Event summary</a></li>
@@ -654,7 +655,7 @@
      <li><a href=#examples-0><span class=secno>4.9.13 </span>Examples</a></ol></li>
    <li><a href=#forms><span class=secno>4.10 </span>Forms</a>
     <ol>
-     <li><a href=#introduction-1><span class=secno>4.10.1 </span>Introduction</a>
+     <li><a href=#introduction-2><span class=secno>4.10.1 </span>Introduction</a>
       <ol>
        <li><a href="#writing-a-form's-user-interface"><span class=secno>4.10.1.1 </span>Writing a form's user interface</a></li>
        <li><a href=#implementing-the-server-side-processing-for-a-form><span class=secno>4.10.1.2 </span>Implementing the server-side processing for a form</a></li>
@@ -736,7 +737,7 @@
        <li><a href=#security-forms><span class=secno>4.10.21.4 </span>Security</a></ol></li>
      <li><a href=#form-submission><span class=secno>4.10.22 </span>Form submission</a>
       <ol>
-       <li><a href=#introduction-2><span class=secno>4.10.22.1 </span>Introduction</a></li>
+       <li><a href=#introduction-3><span class=secno>4.10.22.1 </span>Introduction</a></li>
        <li><a href=#implicit-submission><span class=secno>4.10.22.2 </span>Implicit submission</a></li>
        <li><a href=#form-submission-algorithm><span class=secno>4.10.22.3 </span>Form submission algorithm</a></li>
        <li><a href=#constructing-form-data-set><span class=secno>4.10.22.4 </span>Constructing the form data set</a></li>
@@ -768,7 +769,7 @@
        <li><a href=#using-the-accesskey-attribute-to-define-a-command-on-other-elements><span class=secno>4.11.5.8 </span>Using the <code title=attr-accesskey>accesskey</code> attribute to define a command on other elements</a></ol></ol></li>
    <li><a href=#links><span class=secno>4.12 </span>Links</a>
     <ol>
-     <li><a href=#introduction-3><span class=secno>4.12.1 </span>Introduction</a></li>
+     <li><a href=#introduction-4><span class=secno>4.12.1 </span>Introduction</a></li>
      <li><a href=#links-created-by-a-and-area-elements><span class=secno>4.12.2 </span>Links created by <code>a</code> and <code>area</code> elements</a></li>
      <li><a href=#following-hyperlinks><span class=secno>4.12.3 </span>Following hyperlinks</a>
       <ol>
@@ -808,7 +809,7 @@
      <li><a href=#pseudo-classes><span class=secno>4.14.2 </span>Pseudo-classes</a></ol></ol></li>
  <li><a href=#microdata><span class=secno>5 </span>Microdata</a>
   <ol>
-   <li><a href=#introduction-4><span class=secno>5.1 </span>Introduction</a>
+   <li><a href=#introduction-5><span class=secno>5.1 </span>Introduction</a>
     <ol>
      <li><a href=#overview><span class=secno>5.1.1 </span>Overview</a></li>
      <li><a href=#the-basic-syntax><span class=secno>5.1.2 </span>The basic syntax</a></li>
@@ -898,7 +899,7 @@
      <li><a href=#aborting-a-document-load><span class=secno>6.5.11 </span>Aborting a document load</a></ol></li>
    <li><a href=#offline><span class=secno>6.6 </span>Offline Web applications</a>
     <ol>
-     <li><a href=#introduction-5><span class=secno>6.6.1 </span>Introduction</a>
+     <li><a href=#introduction-6><span class=secno>6.6.1 </span>Introduction</a>
       <ol>
        <li><a href=#appcacheevents><span class=secno>6.6.1.1 </span>Event summary</a></ol></li>
      <li><a href=#appcache><span class=secno>6.6.2 </span>Application caches</a></li>
@@ -918,7 +919,7 @@
   <ol>
    <li><a href=#scripting><span class=secno>7.1 </span>Scripting</a>
     <ol>
-     <li><a href=#introduction-6><span class=secno>7.1.1 </span>Introduction</a></li>
+     <li><a href=#introduction-7><span class=secno>7.1.1 </span>Introduction</a></li>
      <li><a href=#enabling-and-disabling-scripting><span class=secno>7.1.2 </span>Enabling and disabling scripting</a></li>
      <li><a href=#processing-model-1><span class=secno>7.1.3 </span>Processing model</a>
       <ol>
@@ -968,7 +969,7 @@
      <li><a href=#element-level-focus-apis><span class=secno>8.3.4 </span>Element-level focus APIs</a></ol></li>
    <li><a href=#assigning-keyboard-shortcuts><span class=secno>8.4 </span>Assigning keyboard shortcuts</a>
     <ol>
-     <li><a href=#introduction-7><span class=secno>8.4.1 </span>Introduction</a></li>
+     <li><a href=#introduction-8><span class=secno>8.4.1 </span>Introduction</a></li>
      <li><a href=#the-accesskey-attribute><span class=secno>8.4.2 </span>The <code>accesskey</code> attribute</a></li>
      <li><a href=#processing-model-3><span class=secno>8.4.3 </span>Processing model</a></ol></li>
    <li><a href=#contenteditable><span class=secno>8.5 </span>The <code title=attr-contenteditable>contenteditable</code> attribute</a>
@@ -978,7 +979,7 @@
    <li><a href=#spelling-and-grammar-checking><span class=secno>8.6 </span>Spelling and grammar checking</a></li>
    <li><a href=#dnd><span class=secno>8.7 </span>Drag and drop</a>
     <ol>
-     <li><a href=#introduction-8><span class=secno>8.7.1 </span>Introduction</a></li>
+     <li><a href=#introduction-9><span class=secno>8.7.1 </span>Introduction</a></li>
      <li><a href=#the-drag-data-store><span class=secno>8.7.2 </span>The drag data store</a></li>
      <li><a href=#the-datatransfer-interface><span class=secno>8.7.3 </span>The <code>DataTransfer</code> interface</a>
       <ol>
@@ -1001,7 +1002,7 @@
    <li><a href=#editing-apis><span class=secno>8.9 </span>Editing APIs</a></ol></li>
  <li><a href=#video-conferencing-and-peer-to-peer-communication><span class=secno>9 </span>Video conferencing and peer-to-peer communication</a>
   <ol>
-   <li><a href=#introduction-9><span class=secno>9.1 </span>Introduction</a></li>
+   <li><a href=#introduction-10><span class=secno>9.1 </span>Introduction</a></li>
    <li><a href=#obtaining-local-multimedia-content><span class=secno>9.2 </span>Obtaining local multimedia content</a></li>
    <li><a href=#stream-api><span class=secno>9.3 </span>Stream API</a></li>
    <li><a href=#peer-to-peer-connections><span class=secno>9.4 </span>Peer-to-peer connections</a></li>
@@ -1016,7 +1017,7 @@
    <li><a href=#event-definitions-1><span class=secno>10.1 </span>Event definitions</a></li>
    <li><a href=#web-messaging><span class=secno>10.2 </span>Cross-document messaging</a>
     <ol>
-     <li><a href=#introduction-10><span class=secno>10.2.1 </span>Introduction</a></li>
+     <li><a href=#introduction-11><span class=secno>10.2.1 </span>Introduction</a></li>
      <li><a href=#security-postmsg><span class=secno>10.2.2 </span>Security</a>
       <ol>
        <li><a href=#authors><span class=secno>10.2.2.1 </span>Authors</a></li>
@@ -1024,7 +1025,7 @@
      <li><a href=#posting-messages><span class=secno>10.2.3 </span>Posting messages</a></ol></li>
    <li><a href=#channel-messaging><span class=secno>10.3 </span>Channel messaging</a>
     <ol>
-     <li><a href=#introduction-11><span class=secno>10.3.1 </span>Introduction</a></li>
+     <li><a href=#introduction-12><span class=secno>10.3.1 </span>Introduction</a></li>
      <li><a href=#message-channels><span class=secno>10.3.2 </span>Message channels</a></li>
      <li><a href=#message-ports><span class=secno>10.3.3 </span>Message ports</a>
       <ol>
@@ -1186,10 +1187,10 @@
    <li><a href=#parsing-xhtml-fragments><span class=secno>12.4 </span>Parsing XHTML fragments</a></ol></li>
  <li><a href=#rendering><span class=secno>13 </span>Rendering</a>
   <ol>
-   <li><a href=#introduction-12><span class=secno>13.1 </span>Introduction</a></li>
+   <li><a href=#introduction-13><span class=secno>13.1 </span>Introduction</a></li>
    <li><a href=#the-css-user-agent-style-sheet-and-presentational-hints><span class=secno>13.2 </span>The CSS user agent style sheet and presentational hints</a>
     <ol>
-     <li><a href=#introduction-13><span class=secno>13.2.1 </span>Introduction</a></li>
+     <li><a href=#introduction-14><span class=secno>13.2.1 </span>Introduction</a></li>
      <li><a href=#display-types><span class=secno>13.2.2 </span>Display types</a></li>
      <li><a href=#margins-and-padding><span class=secno>13.2.3 </span>Margins and padding</a></li>
      <li><a href=#alignment><span class=secno>13.2.4 </span>Alignment</a></li>
@@ -1215,7 +1216,7 @@
      <li><a href=#toolbars-0><span class=secno>13.3.6 </span>Toolbars</a></ol></li>
    <li><a href=#bindings><span class=secno>13.4 </span>Bindings</a>
     <ol>
-     <li><a href=#introduction-14><span class=secno>13.4.1 </span>Introduction</a></li>
+     <li><a href=#introduction-15><span class=secno>13.4.1 </span>Introduction</a></li>
      <li><a href=#the-button-element-0><span class=secno>13.4.2 </span>The <code>button</code> element</a></li>
      <li><a href=#the-details-element-0><span class=secno>13.4.3 </span>The <code>details</code> element</a></li>
      <li><a href=#the-input-element-as-a-text-entry-widget><span class=secno>13.4.4 </span>The <code>input</code> element as a text entry widget</a></li>
@@ -31874,8 +31875,55 @@
   -->
 
 
-  <h6 id=syntax-0><span class=secno>4.8.10.13.1 </span>Syntax</h6>
+  <h6 id=introduction-1><span class=secno>4.8.10.13.1 </span>Introduction</h6>
 
+  <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 A:end S:50%
+<v Roger Bingham>When we e-mailed—
+
+00:30.500 --> 00:32.500 A:start S:50%
+<v Neil DeGrass Tyson>Didn't we talk about enough in that conversation?
+
+00:32.000 --> 00:35.500 A:end S:50%
+<v Roger Bingham>No! No no no no; 'cos 'cos obviously 'cos
+
+00:32.500 --> 00:33.500 A:start S:50%
+<v Neil DeGrass 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>
+
+
+  <h6 id=syntax-0><span class=secno>4.8.10.13.2 </span>Syntax</h6>
+
   <p>A <dfn id=webvtt-file>WebVTT file</dfn> must consist of a <a href=#webvtt-file-body>WebVTT file
   body</a> encoded as UTF-8 and labeled with the <a href=#mime-type>MIME
   type</a> <code><a href=#text/vtt>text/vtt</a></code>. <a href=#refsRFC3629>[RFC3629]</a></p>
@@ -32232,7 +32280,7 @@
 
   <div class=impl>
 
-  <h6 id=parsing-0><span class=secno>4.8.10.13.2 </span>Parsing</h6>
+  <h6 id=parsing-0><span class=secno>4.8.10.13.3 </span>Parsing</h6>
 
   <p>A <dfn id=webvtt-parser>WebVTT parser</dfn>, given an input byte stream and a
   <a href=#text-track-list-of-cues>text track list of cues</a> <var title="">output</var>,
@@ -32867,7 +32915,7 @@
 
    <li><p>Return <var title="">result</var>.</li>
 
-  </ol><h6 id=webvtt-cue-text-parsing-rules><span class=secno>4.8.10.13.3 </span><dfn>WebVTT cue text parsing rules</dfn></h6>
+  </ol><h6 id=webvtt-cue-text-parsing-rules><span class=secno>4.8.10.13.4 </span><dfn>WebVTT cue text parsing rules</dfn></h6>
 
   <p>A <dfn id=webvtt-node-object>WebVTT Node Object</dfn> is a conceptual construct used to
   represent components of <a href=#webvtt-cue-text>WebVTT cue text</a> so that its
@@ -33469,7 +33517,7 @@
 
    <li><p>Jump to the step labeled <i>loop</i>.</li>
 
-  </ol><h6 id=webvtt-cue-text-dom-construction-rules><span class=secno>4.8.10.13.4 </span><dfn>WebVTT cue text DOM construction rules</dfn></h6>
+  </ol><h6 id=webvtt-cue-text-dom-construction-rules><span class=secno>4.8.10.13.5 </span><dfn>WebVTT cue text DOM construction rules</dfn></h6>
 
   <p>To convert a <a href=#list-of-webvtt-node-objects>List of WebVTT Node Objects</a> to a DOM
   tree for <code><a href=#document>Document</a></code> <var title="">owner</var>, user
@@ -41081,7 +41129,7 @@
          <td> 11.6% <td> 12.3% <td> 12.6%
   </table><h3 id=forms><span class=secno>4.10 </span>Forms</h3>
 
-  <h4 id=introduction-1><span class=secno>4.10.1 </span>Introduction</h4>
+  <h4 id=introduction-2><span class=secno>4.10.1 </span>Introduction</h4>
 
   <p><i>This section is non-normative.</i></p>
 
@@ -51378,7 +51426,7 @@
 
   <div class=impl>
 
-  <h5 id=introduction-2><span class=secno>4.10.22.1 </span>Introduction</h5>
+  <h5 id=introduction-3><span class=secno>4.10.22.1 </span>Introduction</h5>
 
   </div>
 
@@ -53615,7 +53663,7 @@
 
   <h3 id=links><span class=secno>4.12 </span>Links</h3>
 
-  <h4 id=introduction-3><span class=secno>4.12.1 </span>Introduction</h4>
+  <h4 id=introduction-4><span class=secno>4.12.1 </span>Introduction</h4>
 
   <p>Links are a conceptual construct, created by <code><a href=#the-a-element>a</a></code>,
   <code><a href=#the-area-element>area</a></code>, and <code><a href=#the-link-element>link</a></code> elements, that <a href=#represents title=represents>represent</a> a connection between two
@@ -55757,7 +55805,7 @@
 -->
 
 
-  <h3 id=introduction-4><span class=secno>5.1 </span>Introduction</h3>
+  <h3 id=introduction-5><span class=secno>5.1 </span>Introduction</h3>
 
   <h4 id=overview><span class=secno>5.1.1 </span>Overview</h4>
 
@@ -64612,7 +64660,7 @@
 
   -->
 
-  <h4 id=introduction-5><span class=secno>6.6.1 </span>Introduction</h4>
+  <h4 id=introduction-6><span class=secno>6.6.1 </span>Introduction</h4>
 
   <p><i>This section is non-normative.</i></p>
 
@@ -66745,7 +66793,7 @@
 
   <h3 id=scripting><span class=secno>7.1 </span>Scripting</h3>
 
-  <h4 id=introduction-6><span class=secno>7.1.1 </span>Introduction</h4>
+  <h4 id=introduction-7><span class=secno>7.1.1 </span>Introduction</h4>
 
   <p>Various mechanisms can cause author-provided executable code to
   run in the context of a document. These mechanisms include, but are
@@ -70180,7 +70228,7 @@
 
   <h3 id=assigning-keyboard-shortcuts><span class=secno>8.4 </span>Assigning keyboard shortcuts</h3>
 
-  <h4 id=introduction-7><span class=secno>8.4.1 </span>Introduction</h4>
+  <h4 id=introduction-8><span class=secno>8.4.1 </span>Introduction</h4>
 
   <p><i>This section is non-normative.</i></p>
 
@@ -70988,7 +71036,7 @@
   </div>
 
 
-  <h4 id=introduction-8><span class=secno>8.7.1 </span>Introduction</h4>
+  <h4 id=introduction-9><span class=secno>8.7.1 </span>Introduction</h4>
 
   <p><i>This section is non-normative.</i></p>
 
@@ -74113,7 +74161,7 @@
 
   <h2 id=video-conferencing-and-peer-to-peer-communication><span class=secno>9 </span>Video conferencing and peer-to-peer communication</h2>
 
-  <h3 id=introduction-9><span class=secno>9.1 </span>Introduction</h3>
+  <h3 id=introduction-10><span class=secno>9.1 </span>Introduction</h3>
 
   <p><i>This section is non-normative.</i></p>
 
@@ -76086,7 +76134,7 @@
   </div>
 
 
-  <h4 id=introduction-10><span class=secno>10.2.1 </span>Introduction</h4>
+  <h4 id=introduction-11><span class=secno>10.2.1 </span>Introduction</h4>
 
   <p><i>This section is non-normative.</i></p>
 
@@ -76325,7 +76373,7 @@
 
   <h3 id=channel-messaging><span class=secno>10.3 </span><dfn>Channel messaging</dfn></h3>
 
-  <h4 id=introduction-11><span class=secno>10.3.1 </span>Introduction</h4>
+  <h4 id=introduction-12><span class=secno>10.3.1 </span>Introduction</h4>
 
   <p><i>This section is non-normative.</i></p>
 
@@ -86235,7 +86283,7 @@
   "must".</i></p>
 
 
-  <h3 id=introduction-12><span class=secno>13.1 </span>Introduction</h3>
+  <h3 id=introduction-13><span class=secno>13.1 </span>Introduction</h3>
 
   <p>In general, user agents are expected to support CSS, and many of
   the suggestions in this section are expressed in CSS terms. User
@@ -86273,7 +86321,7 @@
 
   <h3 id=the-css-user-agent-style-sheet-and-presentational-hints><span class=secno>13.2 </span>The CSS user agent style sheet and presentational hints</h3>
 
-  <h4 id=introduction-13><span class=secno>13.2.1 </span>Introduction</h4>
+  <h4 id=introduction-14><span class=secno>13.2.1 </span>Introduction</h4>
 
   <p>The CSS rules given in these subsections are, except where
   otherwise specified, expected to be used as part of the user-agent
@@ -88404,7 +88452,7 @@
 
   <h3 id=bindings><span class=secno>13.4 </span>Bindings</h3>
 
-  <h4 id=introduction-14><span class=secno>13.4.1 </span>Introduction</h4>
+  <h4 id=introduction-15><span class=secno>13.4.1 </span>Introduction</h4>
 
   <p>A number of elements have their rendering defined in terms of the
   'binding' property. <a href=#refsBECSS>[BECSS]</a></p>

Modified: source
===================================================================
--- source	2011-06-03 00:48:48 UTC (rev 6182)
+++ source	2011-06-03 01:21:42 UTC (rev 6183)
@@ -35002,6 +35002,53 @@
   -->
 
 
+  <h6>Introduction</h6>
+
+  <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 A:end S:50%
+<v Roger Bingham>When we e-mailed—
+
+00:30.500 --> 00:32.500 A:start S:50%
+<v Neil DeGrass Tyson>Didn't we talk about enough in that conversation?
+
+00:32.000 --> 00:35.500 A:end S:50%
+<v Roger Bingham>No! No no no no; 'cos 'cos obviously 'cos
+
+00:32.500 --> 00:33.500 A:start S:50%
+<v Neil DeGrass 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>
+
+
   <h6>Syntax</h6>
 
   <p>A <dfn>WebVTT file</dfn> must consist of a <span>WebVTT file




More information about the Commit-Watchers mailing list