Onlinenerd24

The FLV Media Player by Jeroen Wijering can be considered as one of the most advanced commercially available FLV Players on the market. It features nifty functions such as streaming and Javascript callback functions. These callbacks can be used to track how often a video was played with Google Analytics.

The reference docs for the Javascript API are the starting point. But I will show you how to implement the video tracking here.

I recomend setting up a new Javascript source file, let’s call it video.js. Include this file into your page which will show the video:
<script type="text/javascript" src="/scripts/video.js"></script>

Now embed the FLV Player according to the documentation.
Every instance of the FLV player will try to call a Javascript function when the FLV is finished loading: playerReady(obj) .

So we add such a funtion to our video.js:

var player;
function playerReady(obj) {
var id = obj['id'];
player = document.getElementById(id);
};

Now the global variable player holds a reference to the FLV Player object. Now we can add a callback handler to the player object, according to the various callback hooks described in the docs. We want to listen to an event that tells us, when a video has been started. This is the “STATE” hook which fires an event every time the video starts playing, stops or ends.


function playerReady(obj) {
var id = obj['id'];
player = document.getElementById(id);
player.addModelListener("STATE","playTracker");
};


So now every time the state of the video changes, the player tries to call the playTracker function. Let’s implement it.


function playTracker(obj) {
if (obj.newstate=='BUFFERING' && started==false) {
started=true;
pageTracker._trackPageview("/videos/videos/"+obj.id );
}


The player not only calls this function, but also send certain information in the parameter obj. We are interested in the value obj.newstate, which of course tells us the state to which the player just changed. We are only interested if the player just started, because this means the user pressed the “PLAY” button. Please note the variable started which we use to ensure that the play event is only tracked once. The “BUFFERING” event could be fired more than once, if the player needs to reload the video, due to a slow connection or when the user skips the videostream.
Inside the playTracker function we use Google Analytics _trackPageview function to fire the actual tracking of the video. The obj.id variable holds the id of the SWF file. This is initially set when embedding the flash in your HTMl page:

var so = new SWFObject('player.swf','mpl','300','250','9');

In this example the id would be mpl. For the tracker to make sense you need to set this id to some string which identifies the actual video, like a description. If you create this id dynamically, for example from a database, make sure to strip any kind of whitespaces or special characters, since this could break either the Javascript or Google’s tracking.

The complete video.js should look like this:


var player;
var started = false;
function playerReady(obj) {
var id = obj['id'];
player = document.getElementById(id);
player.addModelListener("STATE","playTracker");
};

};


Please note that I have not tested this code with more than one instance of the JW FLV Player but I think it might even work with more.

This entry was posted on Tuesday, October 14th, 2008 at 12:07 and is filed under development.