It’s been a good year so far for html5 video. You might have noticed that YouTube and Vimeo have introduced their own player, and with the iPad’s lack of flash support, we are likely to see the tag used in more and more places, at least as an option alongside Flash.
Bruce Lawson of Opera recently showed off a proof-of-concept subtitling system for html5 video. It’s a great concept, and I’m happy to present the work I’ve done on the subject, turning it into a jQuery plugin, with a few extra enhacements. I hope that doing this will provide an easy API for front-end-developers.
Check out the demonstration here.
The latest version has the following features:
- Multiple language support
- Public methods to show, hide, or toggle captions
- Ability to show full transcript in the selected language
The HTML
Make sure you’re using the HTML5 Doctype. Link to the stylesheet, jQuery and the plugin as below:
<!DOCTYPE HTML>
<html lang="en">
<head>
<link href="jcapstyles.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script src="jquery.jcap.js"></script>
</head>
Next, embed the video in the page, doing something like the following. I’m using Bruce’s slightly silly sample video here, since it has a multi-language transcription already!
<video id="myVid" width="400" src="http://www.360innovate.co.uk/blog/leverage-a-synergy.ogv" autobuffer controls>
<p>This page is to demonstrate open HTML5 video, so if you're not using a browser that can display the open Ogg Theora codec, there's not much to see. Sorry!</p>
</video>
Finally, create the transcript HTML.
<div id="transcripts">
<div lang="en">
<p>
<span data-begin=1 data-end=6>Hi, my name's Dr Archimedes Einstein and I'm a Doctor of Science at the University of Science</span>
</p>
<div/>
<div/>
Note that you must give the child div a ‘lang’ attribute.
The JavaScript
This is where the action happens. First, pass an anonymous function to jQuery to execute as a callback for when the document is ready. Then, call the jCaps plugin, with an object literal as a parameter. You should pass the following as a bare minimum, but there are other options that can be passed – see the code file for details.
$(function(){
$("#myVid").jCaps({
transcriptsDiv: $('#transcripts'),
language: $('select[name="changeLang"]').val()
});
})
Note that you must pass a transcripts div as a bare minimum. This will hide the transcripts div from view. By default, captions are not shown. You can switch it on by attaching the following methods to a click event on a button, or link for example:
$('#toggleCaptions').click(function(){
$('#myVid').jCaps.toggle();
});
$('#switchOn').click(function(){
$('#myVid').jCaps.switchOn();
});
$('#switchOff').click(function(){
$('#myVid').jCaps.switchOff();
});
switchOff() and switchOn() should be self-explanatory; toggle() will show the captions if they are hidden, and vice-versa.
You can change the language of the captions by calling the switchLanguage method:
$('select[name="changeLang"]').change(function(){
$('#myVid').jCaps.switchLanguage('ja');
});
There is one final public method at present: swapOut(). This shows the full transcript in the selected language when activated.
$('#transcript').click(function(){
$('#myVid').jCaps.swapOut();
});
That’s it! You can view the demonstration here.
Please note that this is very experimental, and might change or break at any time. You can download the source at github, and of course I would welcome any feedback or pull requests. Credit for the original script goes to Bruce Lawson, Philip Jägenstedt, and Daniel Davis.
Tags: jquery plugin html html5
