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!
Answer
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/
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM