[SOLVED] Detect Flowplayer on page and add event listener

Detect Flowplayer on page and add event listener

I'm using the html5media library, which automatically replaces the HTML5 video tag on the page with the Flowplayer Flash player for browsers that don't support the video tag. This happens on IE and some older browsers.

I need to detect if the Flowplayer exists on the page and add an event listener to each instance that fires off a JavaScript function when the user starts playing a video. Is this possible via jQuery? The Flowplayer's Player object's API is described here; some examples:

/* Set common clip properties and event listeners
 * in run-time
 */

// register event listener with common clip
$f("player").onStart(function() {
  alert("Playing");
});

// this does the same thing
$f("player").getCommonClip().onStart(function() {
  alert("Playing");
});

// if you want to register a listener to a specific clip *only*
$f("player").getClip(1).onStart(function() {
  alert("Playing");
});

How do you attach an event listener for the onStart event to each instance of the Flowplayer, if it exists on the page?

Solution

It should be possible by setting your handlers up in the configureFlowplayer callback described here: http://wiki.github.com/etianen/html5media/custom-flash-players

It should end up looking something like this where the config param is something they are using to configure flowplayer. I have not tested this code, but this should give you an idea of what you need to do:

<script>
html5media.configureFlowplayer = function(tag, element, config) {
    config.onStart = function(){alert("playing");}
}
</script>