Controlling the player from javascript
Last updated on Feb. 17, 2010
Through the javascript API of our videoplayer, you can facilitate rich interaction between the video and other content on your page. For example, you might want to dispense with the built-in controlbar of the videoplayer and instead offer other buttons on your page to control the video playback. In this tutorial we'll create a such a javascript controlbar, inspired by the Easy YouTube player from Christian Heilmann.
Demo
A working demo of this controlbar can be seen here. The big buttons are styled in HTML and interact with the player.
Connecting the player
The first thing that needs to be done is connecting the videoplayer to javascript. This can be done by defining a global javascript, playerReady. Every player that is inited on the page will call this function, so javascript knows it exists:
<script type="text/javascript" src="http://content.bitsontherun.com/players/ntPYsD4L-328-19438.js"></script>
<script type="text/javascript">
var player;
function playerReady(obj) {
player = document.getElementById(obj.id);
};
</script>
Once the player is loaded to the stage, the playerReady call is pinged. This function will store a reference to the player in the player variable. More info about the playerReady call can be found here.
Sending events
Now the player is connected, you can call simple javascript functions to send events to the player. The player API provides the call sendEvent for this. There's a string of events available, and the full overview can be found in the player docs. Here's what this demo uses:
<ul>
<li><a href="javascript:player.sendEvent('PLAY','true');">play</a></li>
<li><a href="javascript:player.sendEvent('PLAY','false');">pause</a></li>
<li><a href="javascript:player.sendEvent('STOP');">stop</a></li>
<li><a href="javascript:player.sendEvent('MUTE','false');">unmute</a></li>
<li><a href="javascript:player.sendEvent('MUTE','true');">mute</a></li>
</ul>
Replacing the text links with some buttons was simply a matter of adding some CSS.
Further enhancements
To further enhance such a controlbar, one could think about implementing fast-forward and fast-backward buttons. This can be done by also adding a listener to the player, which listens to the current video position. The fast forward button cound then shift to the current position + 10 and the backward button to the current position -10. For more info about listeners, view the addControllerListener and addModelListener methods of the API and the tutorial that explains how to add listeners.
