在瀏覽器中下載視頻，而不是在新標簽中播放[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;
}
?>

希望有所幫助。

資源