JW Player: ActionScript API Calls

JW Player 5 supports an extremely flexible API for plugins, that can be built in actionscript). It is possible to read the config/playlist variables of the player, call player functions, and listen for Flash Events. A small initialization routine is needed to connect your apps to the player.
Version 5 also supports plugins and javascript for version 4 of the player, although some features may no longer be available.

Initialization

Javascript

Please note that the player will NOT be available the instant your HTML page is loaded and the first javascript is executed; the SWF file (~70k) needs to be loaded and instantiated first. You can avoid this issue by defining a simple javascript function, and configuring the player to call it using the playerready flashvar. When the player has succesfully instantiated, it will call the javascript function you specify in the flashvar. The object this callback passes will contain the id, version and client of the player, which allows you to subscribe to events and call player functions, etc. Use the id variable to get a reference to the player itself. Example:

// "playerready" flashvar was set to "playerReadyCallback"

var player;
function playerReadyCallback(obj) {
 alert('the videoplayer '+obj['id']+' has been instantiated');
 player = document.getElementById(obj['id']);
};

If you are not interested in calling the player when the page is loading, you won't need this function. You can then simply use the ID of the embed/object tag that embeds the player to get a reference. A simple getElementById() function will do the trick, so it can be called. This function needs the ID of the object/embed tag as a reference. So for example with this embed tag:

<embed id="myplayer" name="myplayer" src="/upload/player.swf" width="400" height="200" />

You can get a pointer to the player with this line of code:

var player = document.getElementById('myplayer');

Note you must add both the id and name attributes in the <embed> in order to get back an ID in all browsers.

Plugins

All plugins have to define a function called initPlugin(player, config). This function will be called by the player when it is initialized. A reference to the Player is passed to this function, so the plugin can instantly read the config/playlist, call player functions and assign event listeners. A PluginConfig object, which contains plugin-specific configuration parameters, is passed in as an argument to initPlugin as well.
Plugins also need to implement a resize(width, height) function and an id getter.

import com.longtailvideo.jwplayer.player.IPlayer;
import com.longtailvideo.jwplayer.plugins.PluginConfig;

public class MyPlugin extends Sprite implements IPlugin {

 private static var myID:String = "myplugin";

 private var api:IPlayer;
 private var config:PluginConfig;

 public function initPlugin(player:IPlayer, conf:PluginConfig):void { 
  this.api = player;
  this.config = conf;
 }

 public function get id():String { 
  return myID;
 }

 public function resize(width:Number, height:Number):void { 
  // Implement resizing if necessary
 }
}

You need to include the com.longtailvideo.jwplayer.player package in your plugin project in order to be able to strong-type your code and avoid compilation errors.

Reading variables

There are three variable calls you can make through the player API:

• config returns a PlayerConfig object with all the variables (Player5FlashVars) loaded into the player.
• playlist returns a Playlist with all the entries in a playlist. For a single file, the list will indeed have just one entry. Every entry in the playlist is an object too, with a file, type, duration etc. property.
• config.pluginConfig(name) returns an object with all the flashvars for a particular plugin (for example the included controlbar or the externally loaded yousearch). Additionally, every plugin config will contain an x, y, width,height and visible variable that pertain to its positioning.

Javascript

See the Player 4 Api documentation for javascript support.

Plugins

Here are three calls to the player which illustrate reading variables from the player API

// See what the repeat flashvar was configured to
var repeat:String = player.config.repeat
// The title of the second playlist item
var title:String = player.playlist.getItemAt(1).title;
// The current width of the controlbar
var barWidth:Number = player.pluginConfig('controlbar')['width'];

Player commands

Javascript

See the Player 4 Api documentation for javascript support.

Plugins

The ActionScript API exposes the following player commands:

• fullscreen(state:Boolean)
• load(item:*)
• mute(state:Boolean)
• pause()
• play()
• playlistItem(i:Number)
• playlistNext()
• playlistPrev()
• redraw()
• seek(pos:Number)
• stop()
• volume(vol:Number)

Here are some examples of how to call these functions:

// Mute the player
player.mute(true);
// Load a new video into the player
player.load("http://www.mysite.com/mycoolvideo.mp4");

Setting listeners

Javascript

See the Player 4 Api documentation for javascript support.

Plugins

Any of the events described in the Player Events page can be listened for using the Flash Event model. To listen for a player event, simply call the addEventListener() function on the player API.
An example:

private function muteTracker(evt:MediaEvent) { 
    trace('the new mute state is: '+evt.mute); 
}

player.addEventListener(MediaEvent.JWPLAYER_MEDIA_MUTE, muteTracker);

And an example removal call:

player.removeEventListener(MediaEvent.JWPLAYER_MEDIA_MUTE, muteTracker);

Note that you need to include the com.longtailvideo.jwplayer.events package in your plugin project in order to be able to strong-type your code and avoid compilation errors.

Player Controls

The player contains several built-in user controls, which have their own APIs. For example:

• The controlbar offers an addButton() call, used to insert a custom button in the controlbar.
• The dock offers an addButton() call, used to insert a custom button in the dock.

Here's example code that tries to insert a button in the dock and then in the controlbar:

var api:IPlayer;
var icon:DisplayObject;

function clickHandler(evt:MouseEvent):void { 
 trace('Demo button clicked!');
}

function initPlugin(player:IPlayer, conf:PluginConfig):void {
    api = player;
    if(api.config.dock) { 
        api.controls.dock.addButton(icon, "Click here", clickHandler);
    } else {
        api.controls.controlbar.addButton(icon, "Click here", clickHandler);
    }
}