In this modern day, a key element of running video is allowance for "accessibility"—this is not just being able to play videos in different browsers or on different platforms, but also providing support for those with disabilities. In this task, we're going to have a look at one element of this by providing subtitle support using a library called Cuepoint JS, which is available from http://www.cuepoint.org.
For this task, you need to avail yourself of a copy of Cuepoint JS, and copies of your videos from earlier tasks—ideally these should be in MP4, WebM, and Ogg formats. You will also need a copy of the subtitle background image used by the code—this is available in the code download that accompanies this book. Finally, you will also need a number of thumbnail images that can be used as jump links to specific sections of the video. In our task, we will use a video that is 768px wide; for the jump link images to fit in underneath nicely, we will use four images of 182px wide. You may need to alter your image sizes if you are using something different.
Open up the text editor of your choice and copy in the following code snippet:
<!DOCTYPE html> <html lang="en" class="no-js"> <head> <title>A Subtitles Test using Cuepoint JS</title> </head> <body> <div id="container"> </div> </body> </html>
We need to add a reference to the Cuepoint library and jQuery, along with some styling, into the
<head>section of your code:<link rel="stylesheet" href="css/style.css" type="text/css" /> <script src="http://code.jquery.com/jquery-1.7.2.min.js"> </script> <script src='js/cuepoint.js'></script>
Cuepoint needs to be configured, so add the following to a new document in your text editor, and save it as
cuepointscript.js:$(document).ready(function(){ //Slides object with a time (integer) and a html string var slides = { 0: "This is the first subtitle. You can put html in here if you like", 4: "The home of Big Buck Bunny", 12: "Let's meet the cast of Big Buck Bunny...", 23: "Watch out - here they come!" } cuepoint.init(slides); $('#1').click(function(){ cuepoint.setTime(5)}); $('#2').click(function(){ cuepoint.setTime(10)}); $('#3').click(function(){ cuepoint.setTime(15)}); $('#4').click(function(){ cuepoint.setTime(25)}); });Add a reference to the
cuepointscript.jsfile, immediately below the code from step 2:<script src="js/cuepointscript.js"></script>
We now need to add in our video, so go ahead and add in the following code snippet:
<container> <section id='cuePlayer'> <video id='video' width="768" preload="auto" controls poster="images/poster.jpg"> <source src='media/bbb400p.mp4' /> <source src='media/bbb400p.webm' /> <source src='media/bbb400p.ogv' /> </video> <div id='subtitles'></div> </section>
We also need to add in the thumbnails that will add as jump links, immediately below the closing
</section>tag:<div id='thumbs'> <img id='1' src='images/thumb1b.jpg' alt='cuepoint image' class='thumbnail' /> <img id='2' src='images/thumb2b.jpg' alt='cuepoint image' class='thumbnail' /> <img id='3' src='images/thumb3b.jpg' alt='cuepoint image' class='thumbnail' /> <img id='4' src='images/thumb4b.jpg' alt='cuepoint image' class='thumbnail' /> </div>
Finally, let's add in the requisite styling—go ahead and create a file called
style.cssand add the following:body { background: #eee;margin:20px;color:#999; font-family: Helvetica, Arial, sans-serif; } #container { width: 768px; margin: 0 auto; padding: 20px 0; overflow: hidden; } section { margin-bottom: 20px -5; overflow: hidden; } #cuePlayer { overflow: hidden; width: 768px; position: relative; } #video { width: 768px; margin: 0 auto 10px auto; background: #555; } #thumbs { width: 100%; overflow: hidden; clear: both; margin: 0 0 20px 0; } #thumbs .thumbnail { width: 182px; height: 182px; float: left; background: #333; display: block; margin-right: 13px; cursor: pointer; } #thumbs .thumbnail:last-child { margin-right: 0; } #subtitles { position:absolute; top:0;width:100%; color:#FFF; background:url(../images/subtitle.png) repeat; opacity: 1; height:40px; line-height:40px; padding:0 20px; }If all is well, you should see something similar to the following screenshot:
Here, Cuepoint collects together a number of statements into an array; these are displayed on screen according to the second count that must be provided as part of the array. The second part creates a number of calls to cuepoint.setTime() as individual functions, so that if you click on each in turn, it will advance the video to that time.
Cuepoint is one of a number of libraries that aim to provide similar functionality albeit using its own method, and not WebVTT files.
Whilst CuepointJS serves a purpose, it was only designed to be a simple implementation—if you want to learn more, it is worth getting to grips with the WebVTT format and files. Support for the format is still in a state of flux, and has yet to be included in all browsers; once this happens, it looks to become the standard format that can provide some consistency across a number of platforms.
Note
There are a number of articles on the Internet about the format—have a look at http://html5doctor.com/video-subtitling-and-webvtt/, which will give you a good grounding in it.