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
Step 2:
Link the new subtitled video to the webpage.
- Change the first <source> tag from this
- To this:
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.
Related posts:
Accessible HTML5 video for allHow 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
No comments:
Post a Comment