Listening for Player Events

The player can broadcast a lot of information to JavaScript, for example on switching playlist items, on encoutering errors and on changing the playhead, buffer and volume. This demo listens to changes in the playback state (idle, buffering, playing, paused) of the player.

Demo

 

Code

The messages are printed in two steps. First, the player listeners (e.g. jwplayer().onPlay()) define a certain text to print. Second, the small setText() function actually prints the message in the paragraph tag.

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

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

  jwplayer().onPlay(function() { setText("Video is playing!"); });
  jwplayer().onPause(function() { setText("Why did you pause?"); });
  jwplayer().onBuffer(function() { setText("Video is buffering..."); });
  jwplayer().onIdle(function() { setText("The video stopped."); });

  function setText(text) {
    document.getElementById("message").innerHTML = text;
  }
</script>

What next?

Detecting the playback state can be used for various effects and operations. For example, you could fade away certain elements (or everything) around the video to really highlight it. Or you could use the playback changes as triggers for advertising or analytics.

Complete Reference

For a full reference of all events you can listen for in the player, see the JavaScript API Events.