在浏览器中下载视频，而不是在新标签中播放[CORS]

Question

我有<a>并且在其href属性中，我有一个来自第三方api的视频URL，当点击<a>浏览器打开一个新标签并播放视频而不是下载它！

问题：我需要实现的是在点击<a>后直接下载视频而不是在新标签中播放视频并强制用户Right Click然后选择“ Save Video As选项以手动下载...只需单击在Download和浏览器开始下载该视频！

注意：我正在构建一个JavaScript应用程序，所以我需要一个JavaScript而不是PHP的解决方案，它必须在所有浏览器上工作......

编辑：我尝试了download属性 ，它不起作用，因为它只是同源！

更新：我找到的唯一解决方案是+7岁，它使用.htaccess文件进行操作，你可以在这个CSS Tricks文章中检查它，它有一个共同的问题，我不能有2个链接： Watch Video和Download Video使用此解决方案的Download Video ...许多开发人员在那里提到了这个错误，但还没有人修复它！

Answer 1

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

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

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

Answer 2

您需要从服务器设置诸如Content-Disposition之类的标题，如下所示

  Content-Description: File Transfer
  Content-Type: application/octet-stream
  Content-Disposition: attachment; filename="filename.jpg"

为了允许预览和下载，您可以根据查询参数附加这些标题，例如，如果网址有?download ，请附加这些标题以告知浏览器下载文件而不是查看它。

Answer 3

• 您无法更改第三方服务器的标头。

• 您不希望实现可以代理请求并更新标头的服务器。

我能看到的唯一解决方案是下载和处理带有request或axios浏览器js中的内容然后将其提交给用户（但是你必须将它保存在可能不适合大视频的内存中）

Answer 4

由于它是来自第三方API的视频URL，您可以通过两种方式解决问题：

1. 联系api-provider，要求他们添加标题“Content-Type：application / octet-stream”。
2. 代理第三方api，并在代理中添加标题“Content-Type：application / octet-stream”。

是的，关键是在http响应中设置content-type标头。

Answer 5

我最好的猜测是将用户重定向到一个单独的页面，强制浏览器下载文件而不是查看它（图像，视频，PDF格式）

使用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;
}
?>

希望有所帮助。

资源