Listening to media events in the Open Standard Media Player

Before you read this article, it is important that you first take a look at the prerequisites

Because the Open Standard Media Player was written in jQuery, we can easily listen for media events from any player located on our page.

After we are able to locate our media player object on the page, our next step is to attach some event listeners to the media object within our player so that we can listen for events. For now, we will assume that the player that we are listening at can be referenced on our page using jQuery.media.players.player. So, to grab that jQuery object, we can use the following code.

<script type="text/javascript">
   // Get the player.
   var player = jQuery.media.players.player;
</script>

We can now add some event listeners to this object and listen for media events using the jQuery bind method. This can be added on the player.node.player.display object. All media events are triggered through the mediaupdate message. Then, you can extract what media event it was by looking at the event object that is passed to the callback routine. As an example, here is what we would write to listen for the play and pause events from the media player.

<script type="text/javascript">
  // Get the player.
  var player = jQuery.media.players.player;

  // Listen for the play and pause events.
  player.node.player.display.bind("mediaupdate", function( event, data ) 
  {
    switch( data.type ) {
      case 'playing':
        console.log('The media is playing!');
        break;
      case 'paused':
        console.log('The media is paused!');
        break;
    }
  });
</script>

So, from following this, you can now see how we can listen for all media events... They are as follows.

playing - When the media is playing.
paused - When the media is paused.
playerready - When the media player is ready and loaded.
buffering - When the media is buffering
stopped - When the media is completely stopped and unloaded.
progress - The loading progress.
update - When the playhead is updating.
meta - When the meta data has finished loading.
complete - When the media has finished playing.

Listening to media events in the Open Standard Media Player

Sponsors