Therefore a Flash alternative that does supply subtitles is required. To supply the Flash alternative a Flash fall-back in the HTML5 <video> tag is needed in combination with a JavaScript fix that:
- removes the <video> tag completely (which, as a by-product removes the HTML5 Flash fall-back)
- re-embeds the Flash video.
Note: Custom JavaScript could have been written to do everything mentioned above though it is easier to implement the proposed fixes using these common JavaScript libraries. JQuery is becoming more widely used and it is not unlikely that it is already available on the page that will hold the video that requires this fix.
Add the required JavaScript to the page
Step 1:Download the required JavaScript libraries SWFObject and jQuery.
- SWFObject: http://code.google.com/p/swfobject/
- jQuery: http://jquery.com/
Step 2:
- Place the JavaScript files into the ‘website’ folder*.
- The files now in the ‘website’ folder should appear as below:
- videoplayer.fla
- videoplayer.swf
- SkinUnderPlayStopSeekCaptionVol.swf
- html5videoex.mp4
- html5videoex.webm
- html5video.htm
- subs.vtt
- subs.xml
- playr.js
- playr.css
- images (folder)
- jquery-1.7.2.min.js (or similar depending on current version)
- swfobject.js (or similar depending on current version)
Step 3:
- Open html5video.htm in a preferred web editor
- Paste the following HTML into the <head> of the document above the playr.js link. Ensure that the same order as below is kept as it is important.
<link rel="stylesheet" type="text/css" href="playr.css" />
<script src="jquery-1.7.2.min.js" type="text/javascript" language="javascript"></script>
<script src="swfobject.js" type="text/javascript" language="javascript"></script>
<script src="playr.js" type="text/javascript"></script>
Step 4:
This step will:
- include some custom code that inserts a flash object
- use information from the flash fall-back in the video tag
- remove the <video> tag completely
- complete the process on an Android device only.
- Insert the code below between the swfobject.js and playr.js <script> tags.
- creates a <div> for the new Flash to be embedded in
- embeds the Flash video into the newly created <div> using information that is obtained from the Flash fall-back in the <video> tag
- deletes the <video> tag from the page as it is no longer required
<script src="swfobject.js" type="text/javascript" language="javascript"></script>
<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"); //all on one line.
$("video").remove();
</script>
<script src="playr.js" type="text/javascript"></script>
IMPORTANT NOTE*: For some reason Flash video does not work on Android in a Flash video player **unless there is a question mark (?) after the path to the Flash file. A question mark is used to send information from the web page back into Flash. This is why there is a question mark in the code above - ($("video object").attr("data")+”?”, – If variables are being sent to Flash from the standard Flash embed created in the HTML5 <video> tags it is wise to remove the question mark from the JavaScript code. Here is the amended code - ($("video object").attr("data"),
NOTE**: playr.js still runs though it does not find a <video> tag and does not initialize any code that causes confusion for the Android device.
Step 5:
Upload the website and test this on an Android device.
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
No comments:
Post a Comment