Controlling the Player Using JavaScript

Playing, pausing and stopping the player are trivial operations with the JavaScript API. In fact, the only playback function that cannot be called from JavaScript is the fullscreen toggle. This is due to security limitations.

This example demonstrates calling player functions through JavaScript

Demo

Control the video from JavaScript:

• Toggle the playback
• Toggle the audio
• Stop playback

Code

Here's the code for this demo. The jwplayer().play(), jwplayer().setMute() and jwplayer().stop() functions take care of the controls.

<div id="container"></div>

<script type="text/javascript">
  jwplayer("container").setup({
    file: "/videos/bunny.mp4",
    flashplayer: "jwplayer/jwplayer.swf",
    image: "/thumbs/bunny.jpg",
    height: 270,
    width: 480
  });
</script>

<ul>
  <li><a href="#" onclick="jwplayer().play();">Toggle the playback</a></li>
  <li><a href="#" onclick="jwplayer().setMute();">Toggle the audio</a></li>
  <li><a href="#" onclick="jwplayer().stop();">Stop playback</a></li>
</ul>

Enhancements

Some ideas for enhancing this functionality:

• The boring links could of course use some CSS love to turn them into decent controls.
• The links that toggle could also reflect the current state. For example, the button that does the play() can show either a play or a pause icon. You can find out the playback state by also adding a listener to the player. The same goes fur the mute() toggle.
• Amending a seek-bar to the JavaScript controls should be trivial as well. This can be done with a combination of the seek() command and the onSeek() listener. With seeking in place, you have a full set of controls in JavaScript.