Learning Development - Kangan Institute: iPad

Tuesday, 22 May 2012

11 Thoughts on HTML5 video and subtitles

In due time, HTML5 will make the work of a web developer more efficient and effective. Once the final video format is chosen, embedding video in HTML5 webpages will become less complex. In addition, the implementation of subtitles using the <track> tag will eventually require less or no JavaScript fixes.

In the meantime, a Flash fall-back will be necessary as IE8 is expected to be used widely until 2015 when Microsoft stops support for Windows XP and it currently does not support the <video> tag.

There is still some degree of complexity in creating subtitles, in that there is a lack of available software for easy and less time consuming file conversion to HTML5 compatible formats. However, this may change at some stage as the available features in Universal Subtitles/Amara were better than expected and have the potential to be developed further.

Google are currently working on providing subtitles in YouTube by developing voice recognition. However this needs further refinement as when voice recognition was tested with video accompanied by good quality audio; approximately 10% of what was said was correct. Discussion of these results can be viewed here: http://www.youtube.com/watch?v=krq1msguNFo.

It was not possible to locate information that indicated how iOS or Android will support HTML5/web based subtitles in the future. This was a little disappointing as these devices seem to be behind the rapid uptake of HTML5 among web developers. Perhaps changes will occur when the HTML5 specification is completed.

Currently there is a lack of tools that will create, or help to create, WebVTT format files. It is expected that this will change as the format is very similar to the fairly common SRT format and may not require major changes to existing software. Over the life of the project it has been noted that changes were still happening and there was an increase in available tools. (Such is the rate of change that the information in this document was frequently changed to include new developments.)

BubbleJS http://bubbles.childnodes.com/ provides a promising future for both triggering subtitles successfully and providing a high functioning video player. The BubbleJS player can trigger actions that happen outside of the video player such as opening, closing, animating, effecting colour changes etc. on other html objects. This is an excellent result for education in that it provides a video player with accessible video that interacts with other page elements to present information related to the video, in engaging and innovative ways. Hopefully the setup of BubbleJS becomes easier.

Working with video on the web has, over the years, become much easier and a lot of time savings can be found in good processes and work practices. Hopefully the time saved can be dedicated to the creation of subtitles and accessible video for all internet users.

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

10 Making it work now, on an Apple device

Apple iOS devices such as the iPhone, iPod and iPad work differently with video in web pages. Rather than playing the video directly in the webpage the video opens in the inbuilt iOS video player. This means that any subtitles provided by the web page will not be visible as the video is not displayed in the webpage.

The best way to provide a solution is to return to Handbrake so that subtitles can be directly encoded onto the video. This section will provide instructions on this process.

A video demonstration of the steps below is available here: http://www.youtube.com/watch?v=SiBJtF7bQOs

Step 1:
Encode the video with subtitles*. ( The subs.srt file will be used for this purpose)

Open the Handbrake application
Locate and use the original video file, do not use any of the videos previously encoded and compressed, using these videos would only produce a poor quality result as you would be recompressing an already compressed video.
Make the exported file name html5exsubs.mp4
Select the tab labelled ‘Subtitles’
Select the ‘Add External SRT’ button
Navigate to the ‘website’ folder
Choose the subs.srt file
Press the Start button to begin the encoding process.
When encoding is finished move the new MP4 file to the ‘website’ folder

Links to the completed videos and website folder can be found at the bottom of the page.

Step 2:
Link the new subtitled video to the webpage.

Change the first <source> tag from this

To this:

<source src="html5exsubs.mp4" type="video/mp4" />

Upload the new video file and the changes to the webpage and test the webpage on an iOS device such as an iPad.

Select the subtitles button when the video loads in the video player to see the encoded subtitles with the video.

NOTE*: Encoding subtitles directly into the video does not mean the HTML based webpage no longer needs the <track> tag. The above is a ‘fix’ for providing subtitles on an iOS device only.

It didn’t work on the iPad?

Not all versions of iPads are the same. At the time of writing, iPad 1,2 and 3 were available. When testing the procedure outlined above, both iPad 1 and iPad 2 gave different results. On some iPads the video played well however on others there was a conflict between playr.js JavaScript library and the iPad, as playr.js JavaScript library tried to override the iPad in how the video was played.

This problem can be is solved by amending the JavaScript for Android so that subtitles are consistently available on iPad devices as per instructions below:

Step 1
Amend the JavaScript for Android in the <head> of the html5video.htm webpage so it appears as below:

<script type="text/javascript">
$(document).ready(function(){

if(navigator.userAgent.toLowerCase().indexOf("android") > -1) {

$("<div id='flashContent'></div>").insertBefore("video");
swfobject.embedSWF($("video object").attr("data")+"?", "flashContent", $("video object").attr("width"), $("video object").attr("height"), "9.0.0");
$("video").remove();
}

if(navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i)){

$("video").removeAttr("class")
}

})
</script>

This JavaScript removes the ‘class’ attribute from the <video> tag that triggers the playr.js script to create the video player. This means that the video will display in the webpage as normal HTML5 video does on an iPad and the subtitles will be available when the video is played in the native iPad video player.

Learning Development - Kangan Institute

Tuesday, 22 May 2012

11 Thoughts on HTML5 video and subtitles

Related posts:

10 Making it work now, on an Apple device

It didn’t work on the iPad?

Related posts:

Downloads

About Me