在浏览器中下载视频，而不是在新标签页中播放[CORS] [英] Download video in the browser instead of playing it in a new tab [CORS]

问题描述

我有< a> ，并且在其 href 属性中，我从第三方api，当点击该< a> 时，浏览器将打开新建标签并播放视频而不是下载！

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!

问题：我需要实现的是在点击< a> ，而不是在新标签中播放，并迫使用户右键单击，然后选择将视频另存为选项手动下载...只需点击下载，浏览器就会开始下载该视频！

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!

注意：：我正在构建一个JavaScript应用，因此我需要一个JavaScript而非PHP的解决方案，它也必须在所有浏览器上都可以使用...

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...

编辑：我尝试了 下载属性及其

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

更新：我发现的唯一解决方法是使用+7年，它可以操作使用 .htaccess 文件，您可以在此 CSS技巧文章，它有一个常见问题，我不能有2个链接：观看视频和下载视频使用此解决方案...许多开发人员在此提到了此错误，但还没有人解决它！

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!

推荐答案

由于端点支持CORS，因此您可以使用我的文件下载lib 保存内容而不是显示内容。

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）;

在线演示： http：// pagedemos.com/v84rawmzntzt/output/

这篇关于在浏览器中下载视频，而不是在新标签页中播放[CORS]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！