使用Javascript下载HTML5 mp4视频

Question

你好，我有一个HTML5的视频标签，我想给用户提供一个“下载”按钮，用户可以点击并下载该视频。我知道用户可以通过在浏览器上右键单击来下载视频，但我想在我的按钮上提供此功能。

我正在使用简单的代码

$('submit').click(function() {
    window.location.href = 'myvideo.mp4';
});

但它将我重定向到视频网址而不是显示我想要的下载弹出窗口。

谢谢

- Rohit

---

您可以使用“download”属性，但并非所有浏览器都支持。如果您想确保在所有情况下都能下载，请在服务器端设置正确的标头。 - pvg

Answer 1

HTML5浏览器现在允许您将download属性添加到<a>标签中，以在DOM中实现此功能。您无法在纯JavaScript中执行此操作。

来源：https://dev59.com/4Ww15IYBdhLWcg3wJ4es#6794432 如果您可以访问服务器响应，则在PHP中可以执行以下操作：

<?php
header('Content-type: application/octet-stream');
readfile('myvideo.mp4');

- Meghan

---

注意：download 属性仅适用于同源 URL。这意味着它不适用于从其他地方托管的视频文件下载。 - Sam Weaver

Answer 2

你可以使用这个：

$('submit').click(function() {
  $('<a/>',{
     "href":"The/video/src/path",
    "download":"video.mp4",
    id:"videoDownloadLink"
  }).appendTo(document.body);
  $('#videoDownloadLink').get(0).click().remove();

});

- Jai

Answer 3

根据Meghan的回答：

header("Content-disposition: attachment; filename=" . basename($filename) .'"');
header('Content-type: application/octet-stream');
readfile($filename);`

谢谢，@Meghan。我复制并修改了你的代码。

- Chirag Arora