如何使用JavaScript实现HTML视频自动下载，避免a标签点击后新开标签播放

问题原因 #

• <a> 标签的 download 属性仅对同源资源生效，如果视频地址和你的站点不同源，浏览器会忽略 download 属性，直接打开资源播放。
• 原生 <video> 标签开启 controls 属性后渲染的控制栏是浏览器内置UI，不属于DOM可访问节点，无法通过JS直接选中并触发内置下载按钮的点击事件。

可行实现方案 #

同源/资源支持CORS的场景 #

通过fetch请求把视频转成Blob对象，再绑定到a标签触发下载，可绕过普通a标签download的限制：

/**
 * 下载视频文件
 * @param {string} videoUrl 视频地址
 * @param {string} fileName 保存的文件名
 */
async function downloadVideo(videoUrl, fileName = 'download.mp4') {
  try {
    // 请求视频资源
    const response = await fetch(videoUrl);
    // 转成Blob对象
    const videoBlob = await response.blob();
    // 生成临时资源链接
    const blobUrl = window.URL.createObjectURL(videoBlob);

    // 创建临时a标签触发下载
    const tempLink = document.createElement('a');
    tempLink.style.display = 'none';
    tempLink.href = blobUrl;
    tempLink.download = fileName;

    document.body.appendChild(tempLink);
    tempLink.click();

    // 清理临时资源
    document.body.removeChild(tempLink);
    window.URL.revokeObjectURL(blobUrl);
  } catch (error) {
    console.error('视频下载失败，请检查地址是否合法或CORS配置：', error);
  }
}

// 调用示例
downloadVideo('你的视频地址.mp4', '自定义文件名.mp4')

跨域且资源不支持CORS的场景 #

纯前端JS无法完成下载，需要通过后端代理实现：由后端服务请求视频资源，再将资源返回给前端，前端按照上述Blob方案触发下载即可。

补充说明 #

如果你需要在自定义的视频控制栏里加和浏览器原生效果一致的下载按钮，直接将上述方法绑定到你自定义的下载按钮点击事件即可，下图为原生控制栏下载按钮参考：

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