如何创建点击即可在移动端自动下载对应视频的URL/链接？

以下两种方案可以满足需求，可根据自己的技术栈选择：

方法1：HTML原生a标签实现（最简单，适合前端直接配置的场景） #

直接在页面的a标签上添加download属性即可，代码示例：

<a href="/你的视频文件存储路径.mp4" download="自定义保存的视频文件名.mp4">点击下载视频</a>

注意事项：

• download属性仅在href指向的资源和当前站点同域时生效，跨域场景下属性会失效，浏览器会默认直接播放视频而不是下载
• 移动端兼容情况：安卓端主流浏览器（Chrome、国内厂商自带浏览器、微信内置浏览器等）兼容度较好，iOS Safari从13版本开始支持该属性，低于13的版本会默认播放视频

方法2：配置服务端响应头（兼容性最优，不受浏览器/跨域限制） #

这是最稳妥的实现方案，只要让服务端返回视频资源时携带指定响应头，不管是PC还是移动设备访问地址都会直接触发下载，不需要前端做额外配置。需要的响应头如下：

Content-Type: application/octet-stream
Content-Disposition: attachment; filename="用户下载时默认保存的文件名.mp4"
Content-Length: 视频文件的字节大小

不同服务端的实现示例：

• Nginx配置：在站点配置文件中添加针对视频格式的规则即可

location ~* \.(mp4|mov|avi|flv)$ {
    add_header Content-Type application/octet-stream;
    add_header Content-Disposition "attachment; filename=$request_filename";
}

• Node.js（Express框架）实现示例：

app.get('/download-video', (req, res) => {
  const localVideoPath = './你的本地视频存储路径.mp4';
  const downloadFileName = '自定义视频名称.mp4';
  // express内置的download方法会自动补全所有需要的响应头
  res.download(localVideoPath, downloadFileName);
})

如果使用云OSS存储视频，可以直接在云存储控制台配置对应视频文件的响应头，也可以实现相同效果。

移动端适配注意点 #

• iOS 13以下的Safari版本不支持a标签的download属性，使用服务端配置响应头的方案可正常触发下载
• 部分社交软件内置浏览器（微信、QQ等）可能会拦截下载请求，遇到这种情况可以引导用户跳转至系统自带浏览器打开链接再下载

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