I don’t produce much video these days, but as a web surfer I often encounter other people’s videos, and was recently impressed by two video implementations: a TED Talks video page, and an HTML5 video demo produced by Bruce Lawson.
The TED Talks page had a great feature I’d never really seen anywhere else: an interactive transcript of the video that you can read and click. For example, you can click the third sentence of the transcript and the video will jump to that point.
In both cases, the transcript had been marked up as paragraphs, with extra markup denoting phrases that align with the video’s timecode. The TED site used
<p> <a href="#" class="transcriptLink" onclick="seekVideo(0); return false;">One way to change our genes is to make new ones,</a> <a href="#" class="transcriptLink" onclick="seekVideo(2000); return false;">as Craig Venter has so elegantly shown.</a> </p>
span tags, on the other hand, are semantically sound — a
span is a neutral, unobtrusive inline element meant to be a child of a block element such as
p. Perfect. But wait, there’s more! Since this was an HTML5 demo, Bruce took advantage of the new data attribute that can be used on just about any HTML element. (The short version is: you can create any custom attribute you want, so long as the name begins with
data-.) Bruce decided to create two attributes for each
data-begin, which indicates (in seconds) when the phrase starts in the video, and
data-end, which indicates when that phrase has ended in the video. Simple as can be, and extremely efficient:
<p> <span data-begin=1 data-end=6>Hi, my name's Dr Archimedes Einstein and I'm a Dctor of Science at the University of Science</span> </p>
I was incredibly inspired by these two pages and decided to combine their features, creating a new system I call EasyCaptions. The goal of EasyCaptions is to make it as simple as possible to add useful captions to your online videos. I want to eliminate the headaches of captioning as well as the excuses (too hard, confusing, etc.).
What EasyCaptions does:
- Dynamically generates a
divunder your video that will display caption text (the
div‘s style and positioning is completely configurable via CSS).
- Dynamically makes each
spanin your transcript clickable, jumping to that point in the video. This is done via progressive enhancement and event delegation, leaving your markup clean and avoiding heavy-handed use of onclick.
- Works out-of-the-box with HTML5.
- Includes HTML5 video support detection, enabling you to use a Flash-based fallback if you desire.
- Provides a hook for Flash-based fallback systems, enabling the captions and transcript to behave identically to the HTML5 version.
What you’ll need to do:
- Type up the transcript of your video, using
<span>tags to wrap each phrase, just like Bruce’s example above.
- Place the transcript in a container element with a unique ID (such as
The final product. Successfully tested in Firefox, Safari, Opera, and Internet Explorer (IE and older versions of the other browsers all use a Flash Fallback if provided).
Peruse the test suite to get an idea of how flexible the system is.
The documentation and downloads are located on the EasyCaptions page.
New SCORM ebook coming soon!
I'm writing an ebook explaining how to build an HTML-based SCORM course. Subscribe to be notified when it's ready, as well as receive early bird pricing and some free goodies!