Tuesday, 22 May 2012

06 Link subtitles to video

Once you have created and saved the subtitles they have to be linked to the video on the webpage. This post will discuss:

Embedding subtitles using HTML5 only
The section ‘Embedding Subtitles using HTML5 only’ will describe how subtitles will be provided to HTML5 based websites in the future.

Before starting
  • Move the subs.srt, subs.vtt and the subs.xml file to the ‘website’ folder that was created earlier
All files required should now be in the same folder, encoded video files, HTML5 web pages and the subtitle files. It is important to ensure that all sub title files are available in the ‘website’ folder. This will make files ready to work with and link to the HTML5 encoded video.
The website folder should contain these files:
  • videoplayer.fla
  • videoplayer.swf
  • SkinUnderPlayStopSeekCaptionVol.swf
  • html5videoex.mp4
  • html5videoex.webm
  • html5video.htm
  • subs.srt
  • subs.vtt
  • subs.xml
Links to the completed subtitles, videos and website folder can be found at the bottom of the page.

Embed subtitles using HTML5 only

These instructions will provide the HTML5 code for embedding subtitles. Before starting, open the html5video.htm webpage that was created earlier. That web page contained 3 links to 2 videos:
  • html5videoex.mp4
  • html5videoex.webm
Two of the links in this page were for HTML5 enabled devices and the other was for the Flash based fall back if the browser didn’t support HTML5. The HTML code in this webpage currently appears as:

Current code


<body>
<video width="640" height="360" controls="controls">
<source src="html5videoex.mp4" type="video/mp4" />
<source src="html5videoex.webm" type="video/webm" />
<object id="flashContent" type="application/x-shockwave-flash" data="videoplayer.swf" width="640" height="400">
<param name="movie" value="videoplayer.swf" />
<p>Download the Flash plugin from <a href="http://www.adobe.com" title="Download Flash plugin">www.adobe.com</a></p>
</object>
</video>
</body>



Updated code
Add the line of code below after the <source> tags and before the <object> tag to create the link to the subtitle:

<track src="subs.vtt" kind="subtitles" srclang="en" label="English subtitles" default />

The <track> tag is all that is required to meet the proposed HTML5 specification of providing subtitles.
Currently there are no browsers that render the subtitles from the <track> tag only and therefore a JavaScript solution must be provided. This is discussed in the ‘Making Subtitles Work Now’ post (The link to this can be found at the end of this page).

src – this is the location and name of the subtitle file
kind – specifies whether captions, subtitles, chapters, descriptions or metadata are being provided.
srclang – the language of the track
label – the title of the track
default – specifies that the track is enabled by default. Many track elements can be used for the same video.

The webpage code now with the <track> tag included appears as below:

<body>
<video width="640" height="360" controls="controls">
<source src="html5videoex.mp4" type="video/mp4" />
<source src="html5videoex.webm" type="video/webm" /> 
<track src="subs.vtt" kind="subtitles" srclang="en" label="English subtitles" default />
<object id="flashContent" type="application/x-shockwave-flash" data="videoplayer.swf" width="640" height="400">
<param name="movie" value="videoplayer.swf" />
<p>Download the Flash plugin from <a href="http://www.adobe.com" title="Download Flash plugin">www.adobe.com</a></p>
</object>
</video>
</body>
  1. Save the changes to the web page and test the result in a browser. In future versions of web browsers this is all that will be needed to get subtitles to work. As of April 2012* there are no browsers that support the <track> tag.
NOTE*: Web Developers should make sure that the sites and pages that are developed, work on all commonly used web browsers including old and new. It is expected that IE8, that does not have <video> tag support will be in common use for the next few years, 2015 and beyond. Therefore while the <track> tag will start to become more widely incorporated into future browsers web developers will still need to make sure that subtitles are available in older browsers that don’t support <track>.

Related posts:

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

Downloads

Posted by at
Labels: , , , , , , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)