Skip to content

Instantly share code, notes, and snippets.

@HeNy007

HeNy007/add-download-button-in-video-js-player.markdown

Created January 1, 2023 10:59
Show Gist options
  • Save HeNy007/5d91e55f27d179a9019a10643080c345 to your computer and use it in GitHub Desktop.
Save HeNy007/5d91e55f27d179a9019a10643080c345 to your computer and use it in GitHub Desktop.
Download ZIP
Add Download Button in Video-js Player
Raw
index.html
<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>
Raw
script.js
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');
});
});
Raw
scripts
<script src="https://unpkg.com/[email protected]/dist/video.min.js"></script>
<script src="https://7ds7.github.io/videojs-vjsdownload/dist/videojs-vjsdownload.js"></script>
Raw
style.css
.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)}
Raw
styles
<link href="https://vjs.zencdn.net/7.8.4/video-js.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment