Sometimes being home sick means finding things to work on that I wouldn't have done had I been in the office, but need to be done eventually.
So, today I worked on augmenting a JavaScript API for our Flash player at work. Before I go any further, here's a screenshot below. Note that the JavaScript console for Googles' Chrome browser is visible at the bottom.
As you can see, the "movie" is not just the "movie", so to speak. That's to say, there's a very cool bookmarking feature that, if clicked, returns a URL that if visited will start the given video at the point in time at which the user clicked the bookmark. The "movie" also includes some whitespace on the left hand side where links to "part 2"s of certain videos appear if they exist. That's great, but it totally makes our Flash player inappropriate for providing embed codes, etc. since the "movie" is more than the actual video screen and the controls (play, pause, captions, etc.). And, yes, we have to use our own player given that we have to deal with all kinds of authentication and rights issues, which this player support via calls to PHP scripts.
Anyway, a few months ago I'd created a basic JavaScript API so that I could make a demo using our player for SAVS, which is completely reliant on two things: being able to receive the current time of the player and also being able to send a new current time to the player.
Today, I expanded the API a little bit though in the image above you can see a call to the function that moves, in the case above, the player to the 10 second mark. I added support for changing the volume, pausing the video, playing the video if it's paused, turning captions on/off, and getting the total duration of the media file, etc. Basically, I'm trying to add support for anything we'd need to replace the bookmark button and other features with HTML buttons, etc.
There's still lots of work to do, but it's working well provided I embed the SWF file with the <object> tag:
<object id="thisMovie" data="video2_js.swf" style="height: 500px; width: 500px;" type="application/x-shockwave-flash"> <param name="movie" value="video2_js.swf" /> </object>
Then I can use these JavaScript functions on the page that embeds the player …
<script type="text/javascript">
//see: http://kirill-poletaev.blogspot.com/2011/02/exchange-data-between-actionscript-3.html
function getFlashMovie(movieName) {
var isIE = navigator.appName.indexOf("Microsoft") != -1;
return (isIE) ? window[movieName] : document[movieName];
}
// ... more functions were here, but there's too much for a blog post. :-]
function ncl_getCurrentTime() {
var callResult = getFlashMovie("thisMovie").getCurrentTime("");
return callResult;
}
function ncl_getTotalTime() {
var callResult = getFlashMovie("thisMovie").getTotalTime("");
return callResult;
}
</script>
… provided I make sure the ActionScript in the Flash player is prepared for those callbacks …
//see: http://kirill-poletaev.blogspot.com/2011/02/exchange-data-between-actionscript-3.html
//send current time value to JavaScript function
function sendCurrentTimeToJS(name:Number):Number
{
var now:int = cfp.playheadTime;
return now;
}
ExternalInterface.addCallback("getCurrentTime", sendCurrentTimeToJS);
//send total time value to JavaScript function
function sendTotalTimeToJS(name:Number):Number
{
var total:int = cfp.totalTime;
return total;
}
ExternalInterface.addCallback("getTotalTime", sendTotalTimeToJS);
--------------
