Started Adding tracks docs.

Added example captions track.
Updated webvtt parser to support no id line in captions.
Updated webvtt parser to support no hours place in the time.

build/release-files/captions.vtt

@@ -0,0 +1,44 @@
+WEBVTT
+
+00:00.000 --> 00:01.110
+(Heroic music playing for a seagull)
+
+00:01.110 --> 00:04.743
+(Splash!!!)
+
+00:04.743 --> 00:06.790
+(Sploosh!!!)
+
+00:06.790 --> 00:09.225
+(Splash...splash...splash splash splash)
+
+00:09.225 --> 00:11.255
+(Splash, Sploosh again)
+
+00:11.255 --> 00:13.138
+(splash splash)
+
+00:13.138 --> 00:14.984
+Dolphin Sqauck
+
+00:14.984 --> 00:23.802
+Splash splash sploosh
+
+00:23.802 --> 00:28.284
+A whole ton of splashes
+
+00:28.284 --> 00:32.550
+sploosh sploosh wooosh
+
+00:32.550 --> 00:35.203
+CHOMP!!!
+
+00:35.203 --> 00:37.861
+chomp over there
+
+00:37.861 --> 00:39.193
+EEEEEEOOOOOOOOOOWHALENOISE
+
+00:39.193 --> 00:42.611
+BIG SPLASH
+

docs/tracks.md

@@ -0,0 +1,23 @@
+---
+layout: docs
+title: HTML5 Video Text Tracks (Subtitles, Captions, Chapters)
+description: Video.js support for captions, subtitles, and chapters through the use of the HTML5 video track element.
+body_id: tracks
+body_class: docs subpage
+---
+
+Tracks
+======
+
+Text Tracks are a function of HTML5 video for providing time triggered text to the viewer. Video.js makes tracks work across all browsers. There are currently five types of tracks:
+
+- **Subtitles**: Translations of the dialogue in the video for when audio is available but not understood. Subtitles are shown over the video.
+- **Captions**: Transcription of the dialogue, sound effects, musical cues, and other audio information for when the viewer is deaf/hard of hearing, or the video is muted. Captions are also shown over the video.
+- **Chapters**: Chapter titles that are used to create navigation within the video. Typically they're in the form of a list of chapters that the viewer can click on to go to a specific chapter.
+- **Descriptions** (not supported yet): Text descriptions of what's happening in the video for when the video portion isn't available, because the viewer is blind, not using a screen, or driving and about to crash because they're trying to enjoy a video while driving. Descriptions are read by a screen reader or turned into a separate audio track.
+- **Metadata** (not supported yet): Tracks that have data meant for javascript to parse and do something with. These aren't shown to the user.
+
+Creating the Text File
+----------------------
+To provide 
+Tracks require the WebVTT timed text format.

src/tracks.js

@@ -242,7 +242,7 @@ _V_.Track = _V_.Component.extend({
   parseCues: function(srcContent) {
     var cue, time, text,
         lines = srcContent.split("\n"),
-        line = "";
+        line = "", id;
 
     for (var i=1, j=lines.length; i<j; i++) {
       // Line 0 should be 'WEBVTT', so skipping i=0
@@ -251,14 +251,23 @@ _V_.Track = _V_.Component.extend({
 
       if (line) { // Loop until a line with content
 
+        // First line could be an optional cue ID
+        // Check if line has the time separator
+        if (line.indexOf("-->") == -1) {
+          id = line;
+          // Advance to next line for timing.
+          line = _V_.trim(lines[++i]);
+        } else {
+          id = this.cues.length;
+        }
+
         // First line - Number
         cue = {
-          id: line, // Cue Number
+          id: id, // Cue Number
           index: this.cues.length // Position in Array
         };
 
-        // Second line - Time
-        line = _V_.trim(lines[++i]);
+        // Timing line
         time = line.split(" --> ");
         cue.startTime = this.parseCueTime(time[0]);
         cue.endTime = this.parseCueTime(time[1]);
@@ -286,21 +295,40 @@ _V_.Track = _V_.Component.extend({
   parseCueTime: function(timeText) {
     var parts = timeText.split(':'),
         time = 0,
-        flags, seconds;
-    // hours => seconds
-    time += parseFloat(parts[0])*60*60;
-    // minutes => seconds
-    time += parseFloat(parts[1])*60;
-    // get seconds and flags
-    // TODO: Make additional cue layout settings work
-    flags = parts[2].split(/\s+/)
-    // Seconds is the first part before any spaces.
+        hours, minutes, other, seconds, ms, flags;
+
+    // Check if optional hours place is included
+    // 00:00:00.000 vs. 00:00.000
+    if (parts.length == 3) {
+      hours = parts[0];
+      minutes = parts[1];
+      other = parts[2];
+    } else {
+      hours = 0;
+      minutes = parts[0];
+      other = parts[1];
+    }
+
+    // Break other (seconds, milliseconds, and flags) by spaces
+    // TODO: Make additional cue layout settings work with flags
+    other = other.split(/\s+/)
+    // Remove seconds. Seconds is the first part before any spaces.
+    seconds = other.splice(0,1)[0];
     // Could use either . or , for decimal
-    seconds = flags.splice(0,1)[0].split(/\.|,/);
-    time += parseFloat(seconds);
-    // add miliseconds
+    seconds = seconds.split(/\.|,/);
+    // Get milliseconds
     ms = parseFloat(seconds[1]);
+    seconds = seconds[0];
+
+    // hours => seconds
+    time += parseFloat(hours) * 3600;
+    // minutes => seconds
+    time += parseFloat(minutes) * 60;
+    // Add seconds
+    time += parseFloat(seconds);
+    // Add milliseconds
     if (ms) { time += ms/1000; }
+
     return time;
   },