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

Download Plugin

This example plugin shows a download button in the player's dock. When clicked, a download of the video is initiated. The plugin showcases both the dock functionality and the use of the playlist for plugin positioning.

Be warned the current dock functionality is considered beta and will likely change in the next update of the player. We plan to add several enhancements, including iPad compatibility, skinning support and the ability to set a text below the icon.

Demo

Plugin Code

Inside the plugin template, two functions do the grunt work. The first one, goDownload() is redirecting the browser to the video download link. The redirect can either be a downloadlink property on the playlist entry, a link property on the plugin or (as a fallback) the present video URL. With this mechanism, every video in a playlist can offer its own download link.

The second function, _setup(), exposes the download feature by adding a button to the dock. The setup function is automatically called when the player is initialized (through the onReady() listener). Again note this dock functionality will likely change (get extended) in the next player update.

(function(jwplayer){

  var template = function(player, div, config) {
    
    var assets = {
        download: 'http://www.example.com/images/download.png';
    }

    var goDownload = function() {
        var item = player.getPlaylistItem();
        if(item['download.link']) {
            document.location = item['downloadlink'];
        } else if(config.link) { 
            document.location = config.link;
        } else {
            document.location = item.file;
        }
    };
    
    function _setup(evt) {
        player.getPlugin("dock").setButton(
            'downloadButton',
            goDownload,
            assets.download
        );
    };
    player.onReady(_setup);
    
    this.resize = function(width, height) {};
  };

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

})(jwplayer);

Note that, although the this.resize() function is not used, it is still required in the plugin.

Embed Code

The embed code of this example loads the plugin locally again. A small playlist is setup with two entries. The first entry contains a downloadlink (the page will jump to this URL), the second doesn't (the page will jump to the video URL).

<div id="player"></div>
<script type="text/javascript">
   jwplayer('player').setup({
    flashplayer: '../assets/player.swf',
    height: 270,
    playlist: [{ 
            file: '../assets/bunny.mp4',
            image: '../assets/bunny.jpg',
            'downloadlink': 'http://www.bigbuckbunny.org/index.php/download/'
        },{ 
            file: 'http://content.bitsontherun.com/videos/3XnJSIm4-364765.mp4',
            image: 'http://content.bitsontherun.com/thumbs/3XnJSIm4-480.jpg'
    }],
    plugins: {
      './download.js': {}
    },
    width: 480
  });
</script>

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