07 Making subtitles work now

Making the <track> tag work in modern web browsers

At the time of writing there are three JavaScript solutions that offer the required subtitle functionality to the <video> tag; Playr.js, MediaElement and BubbleJS.

Playr.js
The chosen JavaScript solution for this project is playr.js.(Instructions on downloading and using playr.js are outlined in Downloading and Using Playr.js)

Media Element
MediaElement.js http://mediaelementjs.com/, appears to be a robust alternative though the configuration is more complex than other available options.

BubbleJS
BubbleJS http://bubbles.childnodes.com/ is well designed and has the most potential for the creation of interesting video interaction in the future. The downside to this however is that it has some features which make it less compliant and easy to use. For example:

it only supports .srt subtitles
it has a complex setup which makes it difficult for beginners
the subtitle track is linked through JavaScript not by the <track> tag in the HTML.

Downloading and using playr.js

Playr.js is downloadable here: https://github.com/delphiki/Playr

Step 1:

Download the repository as a zip file by selecting the ZIP icon

Download repository as a zip button found at the site mentioned in the above text.

Unzip the files and then place them into the ‘website’ folder created earlier.
Delete the files called CHANGELOG.markdown and README.markdown( they are not important for implementing subtitles).

Your website folder should now include these files and folders:

videoplayer.fla
videoplayer.swf
SkinUnderPlayStopSeekCaptionVol.swf
html5videoex.mp4
html5videoex.webm
html5video.htm
subs.vtt
subs.xml
playr.js
playr.css
images (folder)

Links to the downloaded JavaScript files, videos and website folder can be found at the bottom of the page.

Step 2:
Now link the required files to the webpage.

Change the <head> of the HTML to appear as below: (This will link the required JavaScript to the webpage.)

<head>
<title>My HTML5 Video Page</title>
<link rel="stylesheet" type="text/css" href="playr.css" />
<script src="playr.js" type="text/javascript"></script>
</head>

Step 3:
To enable the JavaScript a small change needs to be made to the <video> tag.

Update the <video> tag so that it matches below:

Save and test the web page in a modern browser.

Subtitles should appear on the page over the video, if they do not, use the video controls that appear underneath the video to show the captions.*

NOTE: * There is a current issue (April 2012) with Google Chrome where the subtitles will not appear unless the video is being viewed over the internet. Local computer testing does not work. Either upload the ‘website’ folder to the internet or test using another browser such as Firefox.

Accessible HTML5 video for all
How to create a basic HTML5 webpage
Fall back to Flash
Current HTML5 subtitle support
Subtitle creation process
Link subtitles to video
Making subtitles work now
A Flash solution
Making it work now, on an Android device
Making it work now, on an Apple device
Thoughts on HTML5 video and subtitles - conclusion

Learning Development - Kangan Institute

Tuesday, 22 May 2012