Free Online Tutorials

Step 1:
First, we need to use a download image: here

Step 2: Setup jwplayer
HTML:

<script src="//content.jwplatform.com/libraries/XeGdlzmk.js"></script>

<div id='mainPlayer'></div>

JS:

var playerInstance = jwplayer('mainPlayer');
	playerInstance.setup({
		stretching:'fill',
		mute: 'false',
		menu: 'true',
		allowscriptaccess: 'always',
		wmode: 'opaque',
		sources: [
        {file:"https://lh3.googleusercontent.com/QNDK59z7n9AVJArziOUXwxBdBLFZezzWfNZoAIRWBKs=m18", type:"mp4", label: '360p',default: true},
        {file:"https://lh3.googleusercontent.com/QNDK59z7n9AVJArziOUXwxBdBLFZezzWfNZoAIRWBKs=m22", type:"mp4", label: '720p',default: true}
        ],								
		image: '',
		width: '100%',
		height: '400',
		autostart: 'true',
		primary:'html5' 
		 									
	});

Step 3: add download button

playerInstance.addButton(
   'http://demo.tutorialspots.com/jwplayer/icon-download.png',
   'Download video', 
   function() {	 
    window.open(playerInstance.getPlaylistItem()['file']+'?type=video/mp4&title=Download%20video', '_blank').blur();
   //window.location.href = playerInstance.getPlaylistItem()['file'];
 },
'download'
);

Here is the online demo:

http://demo.tutorialspots.com/jwplayer/jw1.html

But, if we use playerInstance.getPlaylistItem()[‘file’], we only download the first source file in the currently playing playlist.

How to download the current video?

Here is the solution:

playerInstance.getPlaylistItem()['sources'][playerInstance.getCurrentQuality()].file

Here is the online demo:

http://demo.tutorialspots.com/jwplayer/jw.html