Using Caption Services with HTML5 Video

a11yproject · Jul 17, 2013 · d83cf7c · d83cf7c
1 parent 0d53550
commit d83cf7c
Showing 1 changed file with 37 additions and 40 deletions.
diff --git a/_posts/2013-07-17-using-caption-services-with-html5-video.md b/_posts/2013-07-17-using-caption-services-with-html5-video.md
@@ -1,9 +1,10 @@
 ---
-author: Greg Tarnoff
 layout: post
-title: "How&ndash;to: Using Caption Services with HTML5 Video"
-description: "How to implement captions on HTML5 video (and audio) elements."
+title: | 
+    How&ndash;to: Using Caption Services with HTML5 Video
+description: How to implement captions on HTML5 video (and audio) elements.
 published: true
+author: Greg Tarnoff
 categories:
   - How-tos
 ---
@@ -14,58 +15,54 @@ In addition to making video accessible to those with hearing issues, having a tr
 
 So how do we pull off putting captions into a video after the video has been produced? Fortunately the HTML5 video tag has a solution for us. We have to provide a transcript file in either XML ot a VTT as a track element after your video source files.
 
-```
-<video class="span12 readable" poster="your-video-poster.jpg" controls tabindex="0" title="My Movie">
-  <source  src="your-video.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
-  <source  src="your-video.ogg" type='application/ogg' />
-  <source  src="your-video.webm" type='video/webm' />
-  <track src="your-video-transcript.vtt" label="English Captions" kind="subtitles" srclang="en-us" default />
-</video>
-```
+
+    <video class="span12 readable" poster="your-video-poster.jpg" controls tabindex="0" title="My Movie">
+        <source  src="your-video.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
+        <source  src="your-video.ogg" type='application/ogg' />
+        <source  src="your-video.webm" type='video/webm' />
+        <track src="your-video-transcript.vtt" label="English Captions" kind="subtitles" srclang="en-us" default />
+    </video>
 
 But what do these track files look like? 
 
 ##VTT
 VTT is a specially formatted text document. It contains each of the queues numbered, followed by the start time & end time and finally the text. It is recommended to include in the text the name of the person talking. Some styling can be included in the text via basic HTML elements like ```i``` or ```b```.
 
 We start it by declaring it a WEBVTT file.
-```
-WEBVTT
 
-1
-00:00:09.000 --> 00:00:11.000
-<b>Alice:</b> Curiouser and curiouser.
+    WEBVTT
 
-2
-00:00:17.000 --> 00:00:18.000
-<b>Rabbit:</b> I told you she was the right Alice!
+    1
+    00:00:09.000 --> 00:00:11.000
+    <b>Alice:</b> Curiouser and curiouser.
+
+    2
+    00:00:17.000 --> 00:00:18.000
+    <b>Rabbit:</b> I told you she was the right Alice!
+
+    3
+    00:00:19.000 --> 00:00:20.000
+    <b>Mouse:</b> I am not convinced.
 
-3
-00:00:19.000 --> 00:00:20.000 
-<b>Mouse:</b> I am not convinced.
+##TTML
 
-```
+In addition to the VTT file format, you can also use TTML (Time Text Markup Language) which is a specific XML format that is currently supported in Flash and used by some major properties on the internet. If you are migrating from Flash, this may be the best choice as you may have the files already. 
 
-Be careful to prevent typos. If your time queues are not in HH:MM:SS.SSS format, it won't work. If the 'arrow' isn't two hyphens and a greater than symbol (-->), it won't work. If there isn't exactly one space on either side of the arrow, it won't work. If the queues are the same start and stop, it won't show up.
 
-##TTML
+    <tt xmlns="http://www.w3.org/ns/ttml" xml:lang="en">
+        <body>
+            <div>
+                <p begin="00:00:9.00" end="00:00:11.00">        
+                    Alice: Curiouser and curiouser.
+                </p>
 
-In addition to the VTT file format, you can also use TTML (Time Text Markup Language) which is a specific XML format that is currently supported in Flash and used by some major properties on the internet. If you are migrating from Flash, this may be the best choice as you may have the files already. 
+                <p begin="00:00:17:00" end="00:00:18:00">
+                    Rabbit: I told you she was the right Alice!
+                </p>
+            </div>
+        </body>
+    </tt>
 
-```
-<tt xmlns="http://www.w3.org/ns/ttml" xml:lang="en">   
-  <body>    
-    <div>      
-      <p begin="00:00:9.00" end="00:00:11.00">        
-        Alice: Curiouser and curiouser.      
-      </p>      
-      <p begin="00:00:17:00" end="00:00:18:00">        
-        Rabbit: I told you she was the right Alice!
-      </p>    
-    </div>   
-  </body> 
-</tt>
-```
 
 ##Transcribing
 Now that you know how to implement it, you need to transcribe all of your videos. You can watch, and rewatch, and rewatch them to capture all of the talking perfectly timed (I watched that Alice in Wonderland trailer 30 or 40 times and it is only a a minute long). However there are services that can handle the transcription for you. These will typically start at $1 per minute for transcription with a fee of $0.25 per minute for the needed timestamping.