[英]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! 我有
<a>
并且在其href
属性中,我有一个来自第三方api的视频URL,当点击<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! 问题:我需要实现的是在点击
<a>
后直接下载视频而不是在新标签中播放视频并强制用户Right Click
然后选择“ Save Video As
选项以手动下载...只需单击在Download
和浏览器开始下载该视频!
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... 注意:我正在构建一个JavaScript应用程序,所以我需要一个JavaScript而不是PHP的解决方案,它必须在所有浏览器上工作......
EDIT: I tried the download
attribute and it doesn't work, because it's Same-Origin Only! 编辑:我尝试了
download
属性 ,它不起作用,因为它只是同源!
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! 更新:我找到的唯一解决方案是+7岁,它使用
.htaccess
文件进行操作,你可以在这个CSS Tricks文章中检查它,它有一个共同的问题,我不能有2个链接: Watch Video
和Download Video
使用此解决方案的Download Video
...许多开发人员在那里提到了这个错误,但还没有人修复它!
Since the endpoint supports CORS, you can use my file download lib to save the content instead of showing it. 由于端点支持CORS,因此您可以使用我的文件下载lib来保存内容而不是显示内容。
download("http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_30fps_normal.mp4");
Online Demo: http://pagedemos.com/v84rawmzntzt/output/ 在线演示: http : //pagedemos.com/v84rawmzntzt/output/
you need to set headers such as Content-Disposition from the server as follows 您需要从服务器设置诸如Content-Disposition之类的标题,如下所示
Content-Description: File Transfer
Content-Type: application/octet-stream
Content-Disposition: attachment; filename="filename.jpg"
to allow previewing and download you might append these headers depending on query parameter for example if the url has ?download
, append these headers to tell the browser to download the file instead of viewing it. 为了允许预览和下载,您可以根据查询参数附加这些标题,例如,如果网址有
?download
,请附加这些标题以告知浏览器下载文件而不是查看它。
You can't change the header of the 3rd party server. 您无法更改第三方服务器的标头。
You don't want to implement a server that could proxying the request and update the header. 您不希望实现可以代理请求并更新标头的服务器。
The only solution I can see is download and handling the content in browser js with request
or axios
then propose it to user (but you have to keep it in memory which might not fit for large video) 我能看到的唯一解决方案是下载和处理带有
request
或axios
浏览器js中的内容然后将其提交给用户(但是你必须将它保存在可能不适合大视频的内存中)
As it is a Video URL from a 3rd-party api, you can resolve the problem in two ways: 由于它是来自第三方API的视频URL,您可以通过两种方式解决问题:
Yes, the key is to set content-type header in http response.
是的,关键是在http响应中设置content-type标头。
My best guess would be redirecting user to a separate page to force browser download the file instead of viewing it (image, video, pdf) 我最好的猜测是将用户重定向到一个单独的页面,强制浏览器下载文件而不是查看它(图像,视频,PDF格式)
PHP Example using readfile function create a download.php file 使用readfile函数的PHP示例创建一个download.php文件
<?php
$file = 'monkey.gif';
if (file_exists($file)) {
header('Content-Description: File Transfer');
header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename="'.basename($file).'"');
header('Expires: 0');
header('Cache-Control: must-revalidate');
header('Pragma: public');
header('Content-Length: ' . filesize($file));
readfile($file);
exit;
}
?>
Hope that helps. 希望有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.