[html5] r7510 - [e] (0) More examples of WebVTT. Fixing https://www.w3.org/Bugs/Public/show_bug. [...]

[whatwg at whatwg.org]

Author: ianh
Date: 2012-11-19 10:25:45 -0800 (Mon, 19 Nov 2012)
New Revision: 7510

Modified:
   source
Log:
[e] (0) More examples of WebVTT.
Fixing https://www.w3.org/Bugs/Public/show_bug.cgi?id=18770
Affected topics: Video Text Tracks

Modified: source
===================================================================
--- source	2012-11-16 20:26:07 UTC (rev 7509)
+++ source	2012-11-19 18:25:45 UTC (rev 7510)
@@ -39198,8 +39198,65 @@
   </div>
   
 
+  <h3>Other features</h3>
 
+  <!--END dev-html--><p><i>This section is non-normative.</i></p><!--START dev-html-->
 
+  <p>WebVTT also supports some less-often used features.</p>
+
+  <div class="example">
+
+   <p>In this example, one of the cues has an identifier:</p>
+
+   <pre>WEBVTT
+
+00:00.000 --> 00:02.000
+That's an, an, that's an L!
+
+transcription-credit
+00:04.000 --> 00:05.000
+Transcribed by Celestials™</pre>
+
+   <p>This allows a style sheet to specifically target that cue:</p>
+
+   <pre>::cue(#transcription-credit) { color: red }</pre>
+
+  </div>
+
+  <div class="example">
+
+   <p>In this example, each cue says who is talking using voice spans. In the first cue, the span
+   specifying the speaker is also annotated with two classes, "first" and "loud". In the third cue,
+   there is also some italics text (not associated with a specific speaker). The last cue is
+   annotated with just the class "loud".</p>
+
+   <pre>WEBVTT
+
+00:00.000 --> 00:02.000
+<v.first.loud Esme>It's a blue apple tree!
+
+00:02.000 --> 00:04.000
+<v Mary>No way!
+
+00:04.000 --> 00:06.000
+<v Esme>Hee!</v> <i>laughter</i>
+
+00:06.000 --> 00:08.000
+<v.loud Mary>That's awesome!</pre>
+
+   <p>Notice that as a special exception, the voice spans don't have to be closed if they cover the
+   entire cue text.</p>
+
+   <p>Style sheets can style these spans:</p>
+
+   <pre>::cue(v[voice="Esme"]) { color: blue }
+::cue(v[voice="Mary"]) { color: green }
+::cue(i) { font-style: italic }
+::cue(.loud) { font-size: 2em }</pre>
+
+  </div>
+
+
 <!--END dev-html-->
   <h2>Conformance</h2>
 
@@ -39286,7 +39343,7 @@
    we can add a metadata block before the first blank line -->
 
    <li>Zero or more <span title="WebVTT cue">WebVTT cues</span> and/or <span title="WebVTT
-   comments">WebVTT comments</span> separated from each other by two or more <span title="WebVTT
+   comment">WebVTT comments</span> separated from each other by two or more <span title="WebVTT
    line terminator">WebVTT line terminators</span>.</li>
 
    <li>Zero or more <span title="WebVTT line terminator">WebVTT line