如何通过HTML a标签的download属性实现MP4文件强制下载而非播放

核心原因与对应解决方法 #

• 跨域资源限制导致属性失效
  download属性仅支持同域资源生效，如果你的video.mp4和当前页面部署在不同域名下，浏览器会默认忽略该属性，直接打开资源。
  解决方式：将视频资源与页面部署在同一域名下；如果必须跨域，需要在资源所在服务器配置Access-Control-Allow-Origin响应头放行当前页面域名。

• 服务器响应头未配置下载标识
  如果服务器返回video.mp4的响应头中Content-Type被设置为video/mp4，且没有额外指定下载属性，浏览器会默认识别为可播放的视频资源直接打开。
  解决方式：在服务器端为mp4资源添加强制下载的响应头：

Content-Disposition: attachment; filename="video.mp4"
Content-Type: application/octet-stream

不同服务端的配置参考：

1. Nginx：在对应站点配置的location块中添加：

location ~* \.mp4$ {
    add_header Content-Disposition "attachment; filename=video.mp4";
    types { application/octet-stream .mp4; }
}

2. Apache：在站点根目录的.htaccess文件中添加：

<FilesMatch "\.mp4$">
    Header set Content-Disposition attachment
    ForceType application/octet-stream
</FilesMatch>

• download属性兼容性问题
  部分旧版本浏览器要求download属性必须明确指定文件名才会触发下载，空值会被忽略。
  解决方式：修改你的a标签代码，明确指定下载文件名：
  <a href="video.mp4" download="video.mp4">download</a>

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