IE与FireFox浏览器无法下载HTML5音视频的解决方案咨询

嘿，这个问题我之前帮朋友处理过，先给你明确两个关键点：Chrome媒体控件上的下载按钮确实是它的专属功能，FireFox和IE默认不会在原生<audio>/<video>控件上显示这个按钮；另外你遇到的download属性失效问题，是因为不同浏览器对这个属性的支持有差异——IE完全不支持，FireFox只对同源文件生效。

下面给你两种可行的解决方案，从前端兼容到后端兜底都有：

一、给页面加自定义下载按钮（前端方案） #

既然原生控件没有下载按钮，我们自己加一个就行，分两种场景处理：

1. 媒体文件和网站同源 #

直接用<a>标签配合download属性，再补个IE的兼容逻辑：

<video controls src="video.mp4" id="myVideo"></video>
<a href="video.mp4" download="my-video.mp4" id="downloadBtn">点击下载视频</a>

<script>
document.getElementById('downloadBtn').addEventListener('click', function(e) {
  // 处理IE的情况：IE不支持download属性，用msSaveBlob方法
  if (window.navigator.msSaveBlob) {
    const videoUrl = document.getElementById('myVideo').src;
    const xhr = new XMLHttpRequest();
    xhr.open('GET', videoUrl, true);
    xhr.responseType = 'blob';
    xhr.onload = function() {
      if (xhr.status === 200) {
        window.navigator.msSaveBlob(xhr.response, 'my-video.mp4');
      }
    };
    xhr.send();
    e.preventDefault(); // 阻止a标签默认跳转
  }
});
</script>

这样FireFox点击按钮会直接下载，IE则会触发它的原生保存对话框。

2. 媒体文件跨域 #

如果文件在其他域名下，FireFox的download属性会失效，这时候需要用JS先把文件转成Blob，再创建下载链接：

<video controls src="https://other-domain.com/video.mp4" id="myVideo"></video>
<button id="downloadBtn">点击下载视频</button>

<script>
document.getElementById('downloadBtn').addEventListener('click', function() {
  const videoUrl = document.getElementById('myVideo').src;
  const xhr = new XMLHttpRequest();
  xhr.open('GET', videoUrl, true);
  xhr.responseType = 'blob';
  // 注意：目标服务器必须开启CORS，否则这个请求会失败
  xhr.onload = function() {
    if (xhr.status === 200) {
      const blob = xhr.response;
      const downloadUrl = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = downloadUrl;
      a.download = 'my-video.mp4';
      document.body.appendChild(a);
      a.click();
      // 清理临时链接
      window.URL.revokeObjectURL(downloadUrl);
      document.body.removeChild(a);
    }
  };
  xhr.send();
});
</script>

二、后端配置强制下载（最靠谱的方案） #

如果能改后端代码，这是最省心的方式——让后端返回文件时添加特定响应头，不管什么浏览器都会直接触发下载，不会打开播放器。

需要添加的响应头是：

• Content-Disposition: attachment; filename="自定义文件名.mp4"
• Content-Type: application/octet-stream

举几个常见后端语言的例子：

PHP #

$filePath = 'video.mp4';
header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename="my-video.mp4"');
header('Content-Length: ' . filesize($filePath));
readfile($filePath);
exit;

Node.js（Express） #

const fs = require('fs');
const path = require('path');

app.get('/download-video', (req, res) => {
  const filePath = path.join(__dirname, 'video.mp4');
  res.setHeader('Content-Disposition', 'attachment; filename="my-video.mp4"');
  res.setHeader('Content-Type', 'application/octet-stream');
  fs.createReadStream(filePath).pipe(res);
});

之后前端直接链接到这个后端接口就行，比如<a href="/download-video">下载视频</a>，所有浏览器都会直接下载。

最后总结一下 #

• Chrome的媒体控件下载按钮是专属功能，FireFox和IE没有默认提供；
• 前端自定义按钮可以解决兼容，但跨域场景需要注意CORS配置；
• 后端加响应头是最通用的方案，适配所有浏览器，不用折腾前端兼容。

内容的提问来源于stack exchange，提问作者Fabrice Kimmel