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

Countdown Plugin

This example plugin shows a counter in the middle of the video. It displays the number of seconds until the video is completed. The plugin showcases how to listen to player events, and how to position and style elements over the player.

Demo

Plugin Code

Inside the plugin template, you’ll see three listeners getting added to the player: onComplete, onPause and onTime. When called by the player, the first two simply hide the countdown. The later listener also grabs the duration and position from the player callback. See our JavaScript API Reference for a full listing of all events and their parameters.

The required this.resize() function contains a bunch of CSS rules for positioning and styling the countdown. Remember that any CSS rules with a dash in them should be camel cased in JavaScript (e.g. fontSize instead of font-size). The separate _style() function helps keep the code needed for styling short and centralized.

(function(jwplayer){

  var template = function(player, config, div) {
    
    player.onComplete(_hide);
    player.onPause(_hide);
    player.onTime(_count);
    
    function _count(event) {
        div.innerHTML = Math.round(event.duration-event.position);
        _style({opacity: 1});
    };
    function _hide() {
        _style({opacity: 0});
    };
    
    this.resize = function(width, height) {
        _style({
            position: 'absolute',
            margin: (height/2-30)+'px '+(width/2-30)+'px',
            background: 'black',
            color: 'red',
            fontSize: '32px',
            height: '60px',
            lineHeight: '60px',
            textAlign: 'center',
            opacity: 0,
            width: '60px'
        });
    };
    
    function _style(object) {
        for(var style in object) {
          div.style[style] = object[style];
        }
     };
  };

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

})(jwplayer);

Embed Code

The embed code of this example loads the plugin locally. Since this plugin has no configuration options, its option block is simply empty.

<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: {
      './countdown.js': {}
    },
    width: 480
  });
</script>

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