First work on an author guide for WebVTT
authorSilviaPfeiffer
Thu, 23 Aug 2012 22:12:33 +1000
changeset 1 ec08568d4666
parent 0 24ed6c79bb35
child 2 fe5cd9afb9c7
First work on an author guide for WebVTT
author-tutorial/authoring.html
author-tutorial/elephant_simple.png
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/author-tutorial/authoring.html	Thu Aug 23 22:12:33 2012 +1000
@@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Authoring WebVTT</title>
+    <meta http-equiv='Content-Type' content='text/html;charset=utf-8'/>
+    <!-- 
+      === NOTA BENE ===
+      For the three scripts below, if your spec resides on dev.w3 you can check them
+      out in the same tree and use relative links so that they'll work offline,
+     -->
+    <!-- old but local: <script src='../../2009/dap/ReSpec.js/js/respec.js' class='remove'></script> -->
+    <script src='http://www.w3.org/Tools/respec/respec-w3c-common' class='remove' async></script>
+    <script class='remove'>
+      var respecConfig = {
+          // specification status (e.g. WD, LCWD, NOTE, etc.). If in doubt use ED.
+          specStatus:           "unofficial",
+          
+          // the specification's short name, as in http://www.w3.org/TR/short-name/
+          shortName:            "webvtt-authoring",
+
+          // if your specification has a subtitle that goes below the main
+          // formal title, define it here
+          subtitle   :  "A non-normative guide for Web Developers and other WebVTT authors",
+
+          // if you wish the publication date to be other than today, set this
+          // publishDate:  "2009-08-06",
+
+          // if the specification's copyright date is a range of years, specify
+          // the start date here:
+          copyrightStart: "2012",
+
+          // if there is a previously published draft, uncomment this and set its YYYY-MM-DD date
+          // and its maturity status
+          // previousPublishDate:  "1977-03-15",
+          // previousMaturity:  "WD",
+
+          // if there a publicly available Editor's Draft, this is the link
+          edDraftURI:           "https://dvcs.w3.org/hg/text-tracks/author-tutorial/authoring.html",
+
+          // if this is a LCWD, uncomment and set the end of its review period
+          // lcEnd: "2009-08-05",
+
+          // if you want to have extra CSS, append them to this list
+          // it is recommended that the respec.css stylesheet be kept
+          extraCSS:             ["http://dev.w3.org/2009/dap/ReSpec.js/css/respec.css"],
+
+          // editors, add as many as you like
+          // only "name" is required
+          editors:  [
+              { name: "Silvia Pfeiffer", url: "http://www.gingertech.net/",
+                company: "Google Inc.", companyURL: "http://google.com/" },
+          ],
+
+          // authors, add as many as you like. 
+          // This is optional, uncomment if you have authors as well as editors.
+          // only "name" is required. Same format as editors.
+
+          //authors:  [
+          //    { name: "Your Name", url: "http://example.org/",
+          //      company: "Your Company", companyURL: "http://example.com/" },
+          //],
+          
+          // name of the WG
+          wg:           "Text Tracks Community Group",
+          
+          // URI of the public WG page
+          wgURI:        "http://www.w3.org/community/texttracks/",
+          
+          // name (without the @w3c.org) of the public mailing to which comments are due
+          wgPublicList: "public-texttracks",
+          
+          // URI of the patent status for this WG, for Rec-track documents
+          // !!!! IMPORTANT !!!!
+          // This is important for Rec-track documents, do not copy a patent URI from a random
+          // document unless you know what you're doing. If in doubt ask your friendly neighbourhood
+          // Team Contact.
+          wgPatentURI:  "",
+      };
+    </script>
+  </head>
+  <body>
+    <p class="note">
+    <strong>This document is subject to change without notice.</strong>
+    </p>
+
+    <section id='abstract'>
+      This is a guide for authoring files in the <a href="http://dev.w3.org/html5/webvtt/">Web Video Text Tracks (WebVTT)</a> file format. It is an informative specification of WebVTT  - the normative specification is the [[WEBVTT]] specification. While the [[WEBVTT]] specification is targeted at User Agent developers, this document targets Web Developers and other WebVTT authors.
+    </section>
+
+    <section>
+      <h2>Introduction</h2>
+      <p>
+        WebVTT (Web Video Text Tracks) is a file format conceived to specify caption, subtitle and similar text files that render blocks of text in synchronization with a video file. Such files are also called "text tracks".
+      </p>
+      <p>
+        WebVTT is a line-based text format. This is an example WebVTT file:
+      </p>
+      <pre>
+WEBVTT
+
+0:00:15.000 --> 0:00:17.951
+At the left we can see...
+
+0:00:18.166 --> 0:00:20.083
+At the right we can see the...
+
+0:00:20.119 --> 0:00:21.962
+...the head-snarlers
+
+0:00:21.999 --> 0:00:24.368
+Everything is safe.
+Perfectly safe.
+
+0:00:24.582 --> 0:00:27.000
+Emo?
+Emo!
+
+0:00:28.206 --> 0:00:29.996
+Watch out!
+      </pre>
+      <p>
+        On the Web, we use the &lt;video>, &lt;audio> and &lt;track> tags in [[HTML5]] to connect a text track file with a media file. This is an example markup which provides a captions file that is active by default:
+      </p>
+      <pre>
+&lt;video src="elephants_dream.webm" controls>
+  &lt;track src="elephants.vtt" kind="captions" srclang="en-US" default>
+&lt;/video>
+      </pre>
+      <p>
+        This is how the first cue in the above example will be rendered:
+      </p>
+      <img src="elephant_simple.png" alt="first cue rendered on top of Elephants Dream video">
+    </section>
+
+    <section>
+      <h2>WebVTT File Structure</h2>
+    </section>
+
+    <section>
+      <h2>WebVTT File Kinds</h2>
+    </section>
+
+    <section>
+      <h2>Default Styling</h2>
+    </section>
+
+    <section>
+      <h2>WebVTT Cue Markup</h2>
+    </section>
+
+    <section>
+      <h2>WebVTT Cue Settings</h2>
+    </section>
+
+    <section>
+      <h2>WebVTT Cue Styling</h2>
+    </section>
+
+    <section class='appendix'>
+      <h2>Acknowledgements</h2>
+      <p>
+      </p>
+    </section>
+  </body>
+</html>
Binary file author-tutorial/elephant_simple.png has changed