Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Download video in the browser instead of playing it in a new tab [CORS]

I have <a> and inside its href attribute, I've got a Video URL from a 3rd-party api, when clicking on that <a> the browser opens a New Tab and Play the video instead of Downloading it!

PROBLEM: What I need to achieve is to download the video directly after clicking on that <a> instead of playing it in a New Tab and force the user to Right Click then choose Save Video As option to download it manually... Just click on Download and the browser starts to download that video!

NOTE: I am building a JavaScript App, so I need a solution in JavaScript not PHP, it has to be working on all browsers as well...

EDIT: I tried the download attribute and it doesn't work, because it's Same-Origin Only!

UPDATE: The only solution I found was a +7 years old, it manipulates with the .htaccess file, you can check it at this CSS Tricks Article, it has a common issue, I can't have 2 links: Watch Video and Download Video using this solution... Many developers mentioned this bug there, but no one fixed it yet!

like image 245
Elharony Avatar asked Oct 07 '18 09:10

Elharony


People also ask

How do I force a file to download instead of open in browser?

In most browsers, clicking on the link will open the file directly in the browser. But, if you add the download attribute to the link, it will tell the browser to download the file instead. The download attribute works in all modern browsers, including MS Edge, but not Internet Explorer.


1 Answers

Since the endpoint supports CORS, you can use my file download lib to save the content instead of showing it.

download("http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_30fps_normal.mp4");

Online Demo: http://pagedemos.com/v84rawmzntzt/output/

like image 105
dandavis Avatar answered Oct 09 '22 02:10

dandavis