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