7ds7/videojs-vjsdownload

Adds a button to download the video inside a VideoJS player

videojs-vjsdownload

Adds a button to download the video inside the player

Demo

https://7ds7.github.io/videojs-vjsdownload/demo

or

https://codepen.io/binaryunit/pen/xxedpwp

Usage

Include the plugin files

• videojs-vjsdownload.js
• videojs-vjsdownload.css

also available trough npm install videojs-vjsdownload

var player = videojs(document.querySelector('.video-js'), {
  plugins: {
    vjsdownload:{
      beforeElement: 'playbackRateMenuButton',
      textControl: 'Download video',
      name: 'downloadButton',
      downloadURL: 'https://video_url.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');
  });
});

Options

• beforeElement: name of the player.controlBar component for the button to be attached before (default: fullscreenMenuToggle)
• textControl: String for the controlText (default: 'Download Video')
• name: name of the DownloadButton component (default: 'downloadButton')
• downloadURL: oprional file to download (default: null)

Style

By default the download icon is a clip path, to include a custom icon please refer to videojs-vjsdownload.css file

videojs-vjsdownload's Issues

Any way to do this after player created?

Any way to do this after player created?
I don't see the vjsdownload function

Separate window is opening up to download the video file

I am using .mpd file in the src attribute of the video.js player. I have used your plugin to download the .mp4 video, but when I am clicking on the download button a separate tab is opening. Is it possible to trigger the download while being in the same tab? If yes, where should I make changes in the code?

Thanks in advance!!

not working with videojs8 / modern javascript?

videojs-vjsdownload.js:45 Uncaught TypeError: Class constructor s cannot be invoked without 'new'
    at new DownloadButton (videojs-vjsdownload.js:45:80)
    at onPlayerReady (videojs-vjsdownload.js:92:44)
    at b.<anonymous> (videojs-vjsdownload.js:117:5)
    at b.<anonymous> (videojs_8_3_0.min.js:12:24999)
    at Array.forEach (<anonymous>)
    at b.<anonymous> (videojs_8_3_0.min.js:12:24977)
    at videojs_8_3_0.min.js:12:27660

how to integrate with "vue-video-player"

vue-video-player is extend from video.js

Does this work with videojs-playlist?

Hey,

Does this work with videojs-playlist and videojs-playlist-ui?

Thanks!

replace deprecated mergeOptions

VIDEOJS: WARN: videojs.mergeOptions is deprecated and will be removed in 9.0; please use videojs.obj.merge instead

Suggestion: Download "in background"

Suggesting to add something like this to trigger a download instead of opening the video file in a new window.

--- videojs-vjsdownload.js.orig 2024-04-02 08:10:26.852589885 +0000
+++ videojs-vjsdownload.js      2024-04-02 08:12:57.650086987 +0000
@@ -41,7 +41,12 @@

   handleClick(e) {
     let currentDownload = this.player().vjsdownload()?.options.downloadURL || this.player().currentSource().src;
-    window.open(currentDownload, "Download");
+    const a = document.createElement('a');
+    a.href = currentDownload;
+    a.download = true;
+    document.body.append(a);
+    a.click();
+    a.remove();
     this.player().trigger("downloadvideo");
   }
 }