RealEyes Media

This sample player is based on the excellent SMP (Strobe Media Playback) media player that can be downloaded and used for free.

One of the great things about the SMP player is that it is so easy to embed and configure. Using SWFObject you simply point to the SMP SWF and pass the url of your media. You can pass other configuration variables but these are limited, which can be frustrating.

The latest SMP release (2.0) has a very cool new feature – a JavaScript API. This gives the developer with some JS experience the ability to control the player.

In our example we have a basic SMP player which we have extended using the JS API. You’ll notice the ability to play/pause/switch media and the indicators for current state and runtime. Thanks to the JS API we can access the MediaPlayer Class without using any ActionScript code.

For our current state and runtime indicators we simply set up event listeners and the corresponding functions:

player = document.getElementById(playerId);
player.addEventListener(“mediaPlayerStateChange”, “onMediaPlayerStateChange”);

function onMediaPlayerStateChange(state, playerId)
{
var newstate = player.getState();
document.getElementById(“currentState”).innerHTML = newstate;
}

The play/pause button uses a simple onclick event handler:
document.getElementById(“play-pause”).onclick = function(){
var state = player.getState();
if (state == “ready” || state == “paused”) {
player.play2();
}
else
if (state == “playing”) {
player.pause();
}
return false;
};

Our media switcher re-embeds the SWP swf so that we can pass in a new poster frame URL.
function changeSrc(url,purl)
{
// Create a StrobeMediaPlayback configuration
var parameters =
{    src: url
,    autoPlay: false
,    controlBarAutoHide: false
,   poster: purl
,   javascriptCallbackFunction: “onJavaScriptBridgeCreated”
};

// Embed the player SWF:
swfobject.embedSWF
( “../StrobeMediaPlayback.swf”
, “strobeMediaPlayback”
, 640
, 480
, “10.1.0″
, {}
, parameters
, { allowFullScreen: “true”}
, { name: “strobeMediaPlayback” }
);
}

Our sample player only scrapes the surface of the powerful JS API. (This example illustrates how a completely JS-driven control bar can be created.) The SMP team has done a good job of making the power of the MediaPlayer accessible while doing some smart things like making calls from StrobeMediaPlayback to javascript asynchronous and the reverse calls synchronous optimize performance.

Want to learn more?