<video id="videojs-vjsdownload-player" class="video-js vjs-default-skin" poster="https://vjs.zencdn.net/v/oceans.png" controls>
    <source src="//vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
    <source src="//vjs.zencdn.net/v/oceans.webm" type='video/webm'>
  </video>

.video-js.vjs-vjsdownload .vjs-button.vjs-vjsdownload{cursor:pointer;display:block;font-family:VideoJs}.video-js.vjs-vjsdownload .vjs-button.vjs-vjsdownload:before{display:block;position:relative;top:4px;content:'\f101';transform:rotate(90deg);font-size:1.5em}.video-js.vjs-vjsdownload .vjs-button.vjs-vjsdownload:after{display:block;content:' ';width:4px;height:5px;background-color:white;position:relative;top:-11px;left:calc(50% - 2px)}

var player = videojs(document.querySelector('.video-js'), {
          plugins: {
            vjsdownload:{
              beforeElement: 'playbackRateMenuButton',
              textControl: 'Download video',
              name: 'downloadButton',
              downloadURL: '//vjs.zencdn.net/v/oceans.mp4' //optional if you need a different download url than the source
            }
          }
        } , function() {
          console.log('Callback video-js initiated');
          this.on('downloadvideo', function(){
          console.log('downloadvideo triggered'); 
        });
      });