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

Question

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

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

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

编辑： 我尝试了 download attribute 但它不起作用，因为它仅同源！

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

Answer 1

你需要从服务器设置headers比如Content-Disposition如下

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

为了允许预览和下载，您可以根据查询参数附加这些 headers 例如，如果 url 有 ?download，附加这些 headers 以告诉浏览器下载文件而不是查看文件。

Answer 2

您无法更改第 3 方服务器的 header。
您不想实现可以代理请求并更新 header 的服务器。

我能看到的唯一解决方案是使用 request 或 axios 下载并处理浏览器 js 中的内容，然后将其建议给用户（但您必须将其保存在内存中，这可能不适合对于大型视频）

Answer 3

由于端点支持 CORS，您可以使用 my file download lib 保存内容而不是显示内容。

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

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

Answer 4

我最好的猜测是将用户重定向到一个单独的页面以强制浏览器下载文件而不是查看文件（图片、视频、pdf）

PHP 使用 readfile 函数的示例创建一个 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;
}
?>

希望对您有所帮助。

Source

Answer 5

因为它是来自第 3 方 api 的视频 URL，您可以通过两种方式解决问题：

联系 api-provider，请他们添加 header "Content-Type: application/octet-stream"。
代理第 3 方 api，并在代理中添加 header "Content-Type: application/octet-stream"。

Yes, the key is to set content-type header in http response.

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

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

javascript

browser

cross-browser

cors