Overriding &/or Extending Events in JWPlayer

his approach has two advantages, you can 'bake in' custom logging and/or analytics into events ... and do so in a way that supports multiple players in a more 'DRY' approach.

by deanpeters

HTML

<script src="http://publishing.ramp.com/FileResource/widgets/metaplayer3/external/popcorn/popcorn.js"></script>
<link rel="stylesheet" href="http://publishing.ramp.com/FileResource/widgets/metaplayer3/build/mp2/theme.mp2.css">
<script src="http://publishing.ramp.com/FileResource/widgets/metaplayer3/external/jquery/jquery.iecors.js"></script>
<script src="http://publishing.ramp.com/FileResource/widgets/metaplayer3/external/jwplayer/jwplayer.js"></script>
<script src="http://publishing.ramp.com/FileResource/widgets/metaplayer3/build/metaplayer-complete.js"></script>
<h3>Overriding / Extending JWPlayer Events</h3>

<p>This approach has two advantages, you can 'bake in' custom logging and/or analytics into events ... and do so in a way that supports multiple players in a more 'DRY' approach.</p>
<div class="container">
    <div class="metaplayer">
        <div id='target'></div>
    </div>
    <div id='searchbar'></div>
    <div id='transcript'></div>
</div>

CSS

h3 {
    color: #101010;
    font-family: Helvetica, Arial, sans-serif;
    margin: 20px;
    font-size: 20px;
}
.container {
    position: relative;
}
.metaplayer {
    width: 600px;
    height: 300px;
    outline: 1px solid red;
}
#transcript {
    margin-top: 10px;
    outline: 1px solid black;
    width: 600px;
    height: 100px;
}
#searchbar {
    outline: 1px solid black;
    width: 600px;
}

JavaScript

var jwp, video, player;
 $(function () {

     /* - - - - - - - - - */
     // jwplayer.api.prototype.debugLevel = 0;
     jwplayer.api.prototype.log = function () {
         var args = Array.prototype.slice.call(arguments);
         var ret = false;
         // we can perhaps refactor this with a switch/case statement
         // based on the debuglevel established in the setup / config
         if(this.config.debuglevel > 0) {
             ret = console.log("jwplayer.api => ", args);
        };
         return ret;
     };

      /* - - - - - - - - - */

	//
	// TODO -- capture and log a "play" while .getState() goes from "PAUSED" to "PLAY" (need a pause flag?)
	//
     jwplayer.api.prototype.my_onPlayCount = 0;
     jwplayer.api.prototype.my_onPlay = function (event) {
         if (this.my_onPlayCount++ < 1) {
             var ret = this.onPlay.apply(this, arguments);
             this.log("jwplayer.api.prototype.my_onPlay", this.id, (this.my_onPlayCount <= 1), event, arguments, this.my_onPlayCount, "state=" + this.getState());
             return ret;
         };
         this.log("jwplayer.api.prototype.my_onPlay", this.id, (this.my_onPlayCount <= 1), event, arguments, this.my_onPlayCount, "state=" + this.getState());
         return false;
     };

     jwplayer.api.prototype.my_onBeforePlayCount = 0;
     jwplayer.api.prototype.my_onBeforePlay = function (event) {
         if (this.my_onBeforePlayCount++ < 1) {
             var ret = this.onBeforePlay.apply(this, arguments);
             this.log("jwplayer.api.prototype.my_onBeforePlay", this.id, (this.my_onBeforePlayCount <= 1), event, arguments, "state=" + this.getState() );
             return ret;
         };
         this.log("jwplayer.api.prototype.my_onBeforePlay", this.id, (this.my_onBeforePlayCount <= 1), event, arguments, "state=" + this.getState());
         return false;
     };

     jwplayer.api.prototype.my_onComplete = function (event) {
         this.my_onPlayCount = 0;
        ...