From 49212fb45731aca1ff8155ee6ced1f56eb80759f Mon Sep 17 00:00:00 2001 From: Greg Tarnoff <greg.tarnoff@gmail.com> Date: Wed, 17 Jul 2013 11:13:02 -0500 Subject: [PATCH 1/2] Create post on HTML5 video and caption services --- ...using-caption-services-with-html5-video.md | 75 +++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 _posts/2013-07-17-using-caption-services-with-html5-video.md 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 new file mode 100644 index 00000000..4bb51158 --- /dev/null +++ b/_posts/2013-07-17-using-caption-services-with-html5-video.md @@ -0,0 +1,75 @@ +--- +layout: post +title: "How–to: Using Caption Services with HTML5 Video" +description: "How to implement captions on HTML5 video (and audio) elements." +published: false +categories: + - How-tos +--- + +One of the great things about the internet is the ability to share video. With HTML5 we can now use video without the use of Flash. This makes video more accessible as the controls are located in the DOM. However, to do accessible video right, you need to include captions and transcripts. + +In addition to making video accessible to those with hearing issues, having a transcript on the page can provide you localization of a video not always available in the local language. With a transcript on your page, you may increase your search engine rankings by making your content easily indexed by search engine crawl spiders. + +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> +``` + +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. + +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. + +``` + +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 + +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. + +``` +<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. + +A few well reviewed services include: +- [http://verbalink.com/](http://verbalink.com/) +- [https://www.speechpad.com/](https://www.speechpad.com/) +- [http://www.rev.com/transcription](http://www.rev.com/transcription) \ No newline at end of file -- GitLab From 3bfc88d3de47f48de3537f0fd313ff52daf89108 Mon Sep 17 00:00:00 2001 From: Greg Tarnoff <greg.tarnoff@gmail.com> Date: Wed, 17 Jul 2013 11:37:17 -0500 Subject: [PATCH 2/2] Added author to YAML front matter for HTML5 video post --- _posts/2013-07-17-using-caption-services-with-html5-video.md | 1 + 1 file changed, 1 insertion(+) 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 index 4bb51158..358a71fe 100644 --- 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,4 +1,5 @@ --- +author: Greg Tarnoff layout: post title: "How–to: Using Caption Services with HTML5 Video" description: "How to implement captions on HTML5 video (and audio) elements." -- GitLab