08 A Flash solution

Older browsers that don’t support HTML5 video need to use the Flash fall-back as described earlier for IE 6,7 and 8. Firstly the Flash video player needs to be altered to show subtitles. The steps below will update the videoplayer.fla and videoplayer.swf files.

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

Steps	Comments
Open videoplayer.fla that was created earlier.	This can be found in the ‘website’ folder.
Select the Text Tool from the toolbar – don’t draw a text box just yet.	Setting the options before drawing the text box seemed to make a better result in Adobe Flash CS5. This is probably not important though it was frustrating.
Set these properties before drawing a text box: Make the text box a Dynamic text box Choose a readable font such as Arial Set the font size to 16pt Choose a bright colour such as white or yellow Click on the ‘Character Embedding’ button Choose ‘Uppercase’, ‘Lowercase’, ‘Numerals’, Punctuation’ and ‘Basic Latin’	When the text box, or text tool, is selected all of the text box properties can be located in the Properties panel.
Draw a text box at the bottom of the video player screen.	Place it where subtitles usually appear.
Give the text box an instance name of subsText.	When the text box is selected there is an ‘Instance Name’ option located in the Properties panel.
From the ‘Window’ menu choose ‘Components’.
Drag the FLVPlaybackCaptioning component to the left of the video.	The positioning does not matter as the component is not visible when the movie is running; placing it off to the side of the video player keeps the work area clear.
Close the ‘Components’ window.
From the ‘Window’ menu choose ‘Component Inspector’.
Make sure that the FLVPlaybackCaptioning component is selected.	Click on the component with the ‘Selection’ tool (Black Arrow)
Select the ‘Parameters’ tab on the ‘Component Inspector’ window.
Set the CaptionTargetName property to subsText	This is the name of the text box created earlier.
Set the Source property to subs.xml	subs.xml is the subtitle file created for Flash earlier.
From the menu choose ‘Control’ and then ‘Test Movie’.	The subtitles should appear though they may be a little flat and not stand out as much as expected. One way to fix this is to attach a Drop Shadow filter to the text box.
Select the text box.
From the ‘Properties’ panel choose ‘Filters’.
Select the ‘Add Filter’ button at the bottom left of the panel.	The icon looks like a piece of paper.
Choose Drop Shadow.
Save and test the movie again.
A Flash file that plays subtitles has been created.	This should have updated the videoplayer.swf file that is in the ‘Website’ folder.
Go back to the ‘Website’ folder and open the html5video.htm  file in IE 6,7,8 to view the Flash fall-back. The subtitles should now be working there.

• Go back to the ‘Website’ folder and open the html5video.htm  file in IE 6,7,8 to view the Flash fall-back. The subtitles should now be working there.

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

• website folder
• html5videoex.mp4
• html5videoex.webm

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>

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

• website folder
• html5videoex.mp4
• html5videoex.webm