JW Player interaction with Javascript and SWFObject

The JW Player from Longtail Video is one of the best Flash based media players out there. It is very customizable; you can skin it, add extra functionality with plugins, and modify behavior using the wide array of flashvars available.

It also has a rich Javascript framework, meaning you can hook into the player as it is running, and change the state of the player.

An overview

First, we will be using the SWFObject library to set up a basic player on the page.

  1. <head>
  2. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  3. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
  4. <script type="text/javascript">
  5.   swfobject.embedSWF("/path/to/jw_player.swf", "replaceDiv", "300", "120", "9.0.0");
  6. </script>
  7. </head>
  8. <body>
  9. <div id="replaceDiv">The player will be put in place of this div...</div>

So, now we have a player on the page using SWFObjects dynamic replacement functionality. However, this is only the beginning.

How do you control the player?

Adding Flashvars

The JWPlayer allows you to customize the player by adding flashvars - variables that control how the flash file works.

  1. var flashvars = {};
  2. var params = {};
  3. var attributes = {};
  4. flashvars.name1 = "hello";
  5. flashvars.name2 = "world";
  6. flashvars.name3 = "foobar";
  7. swfobject.embedSWF("/path/to/jw_player.swf", "replaceDiv", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);

As you can see here, this time we pass in the three configurable variables to the JW Player - flashvars, params and attributes.

To read more about each of these variables, read the SWFObject documentation.

So now we've learned how to configure the player, how do we control it?

Player Ready

Once we've put the player on the page, we need to be able to get a handle on it, and set up some listeners to see what is going on within the player. Introducing the playerReady function

  1. function playerReady(obj) {
  2.   player = document.getElementById(obj['id']);
  3.   alert("Player is ready to be used.");
  4. }

This function is called once the player has been added to the page. The Flash Object itself sends out a message to the javascript, letting us know it is ready to be manipulated.

All we do here is announce that the player is ready to be used with an alert message. That's not very useful, but at least it illustrates the point of the function - the player is now ready!

Adding a listener

The JW Player has many events that can be listened for, and they fall into three categories:

Controller Events

Controller events deal with input from the user such as changing the volume, and also API input, such as programmatically pressing the play button. .

Model Events

These events deal with the internal mechanisms of the system, so it deals with errors and actual video playback.

View Events

View events represents the interface and gives you ways to manipulate it.


Using these events, we can write javascript to control the player and react to change within the player.

Writing an Event Listener

So, imagine we want to know when the video has started playing, so we can "turn the lights out", like Youtube offer.

It is very easy to write a function to capture such information

  1. function lights(obj) {
  2.   if(obj.newstate == "PLAYING") {
  3.     $('.lights').animate({'opacity':'0.2'}, 500);
  4.   }else {
  5.     $('.lights').animate({'opacity':'1.0'}, 500);
  6.   }
  7. }

So in the above code, we set up the listener function to simply use jQuery to drop the opacity of any elements tagged with a certain class.

But, how does this get called? Remember the playerReady function?

Using the playerReady function

We will now revisit the playerReady function, but this time we will actually use it, by adding a listener for the STATE ModelEvent.

  1. function playerReady(obj) {
  2.   player = document.getElementById(obj['id']);
  3.   // This line adds the listener.  
  4.   player.addModelListener("STATE","lights");
  5. };
  6. // This function is called every time the listener is fired
  7. function lights(obj) {
  8.   // if the state is changed to "PLAYING"
  9.   if(obj.newstate == "PLAYING") {
  10.     $('.lights').animate({'opacity':'0.2'}, 500);
  11.   }else {
  12.     $('.lights').animate({'opacity':'1.0'}, 500);
  13.   }
  14. }

In the above code, you can see how we simply add an event, and then bind a function to that event.

Now, when the movie starts playing, the opacity of the selected elements will drop, giving the impression of the lights being dimmed on the page.

Further Work

You can do an awful lot with this API, so first off I recommend you study all the JW Player docs:

Let me know what you come up with, and happy coding!

Tags

Top