Javascript-Caching Video Player

Question

I've got the following Javascript for creating the HTML of video player. I use Javascript because this is the only way I can tell the player which video to play.

    function createPlayer(videoSource){
            document.writeln("<div id=\"player\">");
            document.writeln("<object width=\"489\" height=\"414\" >");
            document.writeln("<param name=\"player\" value=\"bin-debug/FlexPlayer.swf\">"); 
//etc

The problem is FlexPlayer.swf is loading every time and I need to cache this SWF file. Maybe I should use Javascript constructor but don't know how in this case. Any code help will be greatly appreciated.

Answer 1

If you're video player is in flex (and I'm guessing that it is with the flex tag and the bin-debug folder) - you should just call into the flex app in order to set the video.

You can allow flex and javascript to communicate with each other, without having to embed different versions of it in the HTML! It's awesome, check it out...

In your flex app, after it is initialized you can add something like this :

ExternalInterface.addCallback( 'playVideoFromJS' , playVideo );

What the above does is expose a function named "playVideoFromJS" that can be called in your javascript that will execute the 'playVideo' funciton in the flex app! Neat!

Then add a function like so somewhere in your flex app:

public function playVideo ( videoToPlay : String ) : void {
    ...play video code here
}

Then in javascript, you can actually call your flex function playVideo!

 myFlexAppName.playVideoFromJS( 'myvideoofile.flv' );

More information on ExternalInterface here :

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/external/ExternalInterface.html?filter_flash=cs5&filter_flashplayer=10.2&filter_air=2.6#addCallback ()