03 Fall back to Flash

Currently Internet Explorer 6/7/8 have 24% of the browser market and do not support the HTML5 video tag at all. In this case, some users who are using one of these browsers may not be able to access the video content at all. In this case a fall back to Flash Player is required, as it will more than likely be installed on most computers. To create the fall back to Flash, a Flash video player which supports subtitles and provides helpful advice on how to incorporate them is needed.

If it isn’t possible to find a Flash video player that supports subtitles, it is possible to create one that does. First the creation of a standard Flash based video player will be demonstrated and later attaching subtitles to it will be discussed.

How to create your own Flash video player

This link provides instructions on how to create a Flash video player:
http://www.youtube.com/watch?v=CnZTkKaEIRI

The steps below are a guide to creating a Flash video player.

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

Steps	Comments
Open Adobe Flash and create a new file.	The information in this table works on Flash CS versions 3 and above.
Save the file as videoplayer.fla into the ‘website’ folder where the HTML5 ready videos are stored.	When this step is complete the website folder should contain: videoplayer.fla html5videoex.mp4 html5videoex.webm html5video.htm
Resize the Flash document to the dimensions of the video. Add 40 pixels to the height of the Flash document to make room for the video controls added later.	Using Finder (on the Mac) or My Computer on Windows: Select the video, from information that shows the video dimensions. or Open the video in an application such as QuickTime. In QuickTime open the Movie Inspector window. In VLC from the menu and select: Tools > Media Information > Codec
Open the ‘Components’ window from the top menu in Flash.	Select Window > Components
From the Components window choose Video.
From the Video options choose FLVPlayback click, drag and release this onto the document.
Close the ‘Component’ window.
Set the dimensions (height and width) of the FLVPlayback component, to the same dimensions as the video.	Select the FLVPlayback component by clicking on the video object on the document, *not* the one that is in the component window. Once selected height and width options are made available in the Properties panel.
Position the FLVPlayback component so that its top left corner sits in the top left corner of the document.	Or, select the FLVPlayback component by clicking on the video object on the document and setting the X and Y values in the Properties panel both to 0.
Open the ‘Component Inspector’ window from the top menu.	Select Window > Components Inspector
Select the FLVPlayback component.	Select the FLVPlayback component by clicking on the video object on the document
From the ‘Component Inspector’ window choose ‘skin’.	‘skin’ refers to the controls of the video player – play, stop, pause etc.
Scroll down the list of options and choose: SkinUnderPlayStopSeekCaptionVol	This places the controls under the video. The ‘skin’ will have play, stop, seek, caption and volume controls.
Click OK.
From the ‘Component Inspector’ window choose ‘source’.	Source is used to set the link, or path, to the video.
Select Browse and locate the MP4 video created earlier.	The video player being constructed should be in the same folder (website) as the HTML5 videos prepared earlier. Therefore the MP4 video should be visible when Browse is selected.
Click OK.
Save the changes that have been made.
Press Ctrl-Enter on a PC or Command-Return on a Mac to publish your video.	The video should display in a Flash window. Troubleshooting Video not working: Check the ‘source’ is set correctly in the Component Inspector Make sure that the MP4 video has been encoded with H.264. Use Handbrake to re-encode if necessary.
Done	The website folder should now contain these files: videoplayer.fla videoplayer.swf SkinUnderPlayStopSeekCaptionVol.swf html5videoex.mp4 html5videoex.webm html5video.htm

You are now ready to insert the Flash video fall back into your HTML5 webpage.

Insert the Flash video fall back for IE 6/7/8

The instructions below are a guide to inserting code for the Flash video fall back into older browsers (IE 6,7,8).

Update your webpage, html5video.htm, using the code below.

<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>

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