Order Now AdSolution Sign Up | Login » Bits on the Run Sign Up | Login »

Hello World Plugin

Here is the most basic example of a JW Player Javascript plugin. The plugin simply prints some text on top of the player.

Demo

Plugin Code

The plugin code contains only the necessary lines of code: the closure, the template function with this.resize() and the registerPlugin call. See the Building Javascript Plugins guide for an explanation of these.

(function(jwplayer){

  var template = function(player, config, div) {
    
    function setup(evt) {
        div.style.color = 'red';
        div.innerHTML = config.text;
    };
    player.onReady(setup);
    this.resize = function(width, height) {};
  };

  jwplayer().registerPlugin('helloworld', template);

})(jwplayer);

Embed Code

The embed code of this example loads the plugin locally. The Hello World text is set as part of the configuration.

<div id="player"></div>
<script type="text/javascript">
   jwplayer('player').setup({
    flashplayer: '../assets/player.swf',
    file: '../assets/bunny.mp4',
    height: 270,
    image: '../assets/bunny.jpg',
    plugins: {
      './helloworld.js': {
        text: 'Hello world!'
      }
    },
    width: 480
  });
</script>

Don't forget to also load jwplayer.js, in the <head> of your page!