如何实现点击页面按钮直接触发视频下载而非打开播放？

嘿，我来帮你搞定这个视频下载的问题！你现在遇到的情况其实很常见——浏览器会自动识别视频格式的资源，哪怕你给<a>标签加了download属性，如果服务器返回的响应头没设置对，浏览器还是会优先打开播放而不是触发下载。另外如果视频链接和你的网站不同域，download属性也可能直接失效。

下面给你几个可行的解决方案，你可以根据自己的场景选择：

方案1：修改服务器响应头（最可靠） #

这是从根源解决问题的办法：让服务器在返回视频文件时，设置Content-Disposition响应头为attachment，明确告诉浏览器“这是个需要下载的附件”，而不是可播放的媒体资源。

如果你用的是PHP（看你代码里调用的是F.php），可以在处理视频下载的后端代码里添加这段：

// 可以根据实际情况动态生成文件名
header('Content-Disposition: attachment; filename="sd.mp4"');

设置完这个响应头后，不管你用不用download属性，浏览器都会直接触发下载行为。

方案2：用JavaScript转Blob下载（适合跨域/改不了服务器的情况） #

如果没法修改服务器配置，或者视频链接是跨域的，那可以通过JS先把视频资源转成Blob对象，再创建本地的下载链接，绕开浏览器的自动播放逻辑：

你可以在AJAX请求完成、结果渲染完成后，给下载按钮绑定自定义点击事件：

// 原有代码末尾，渲染完结果后添加事件绑定
$('#videodownload').button('reset');
$(".result").show();

// 绑定SD下载按钮事件
$("#sd a").on("click", function(e) {
  e.preventDefault(); // 阻止默认的跳转播放行为
  const videoUrl = $(this).attr("href");
  const fileName = $(this).attr("download");

  fetch(videoUrl)
    .then(res => res.blob())
    .then(blob => {
      const tempUrl = URL.createObjectURL(blob);
      const downloadLink = document.createElement('a');
      downloadLink.href = tempUrl;
      downloadLink.download = fileName;
      document.body.appendChild(downloadLink);
      downloadLink.click();
      // 清理临时资源，避免内存泄漏
      URL.revokeObjectURL(tempUrl);
      document.body.removeChild(downloadLink);
    })
    .catch(err => {
      console.log('下载出错:', err);
      alert('下载失败，请检查网络或链接是否有效');
    });
});

// 给HD下载按钮绑定相同逻辑
if(data.hd_download_url){
  $("#hd a").on("click", function(e) {
    e.preventDefault();
    const videoUrl = $(this).attr("href");
    const fileName = $(this).attr("download");

    fetch(videoUrl)
      .then(res => res.blob())
      .then(blob => {
        const tempUrl = URL.createObjectURL(blob);
        const downloadLink = document.createElement('a');
        downloadLink.href = tempUrl;
        downloadLink.download = fileName;
        document.body.appendChild(downloadLink);
        downloadLink.click();
        URL.revokeObjectURL(tempUrl);
        document.body.removeChild(downloadLink);
      })
      .catch(err => {
        console.log('下载出错:', err);
        alert('下载失败，请检查网络或链接是否有效');
      });
  });
}

注意：这个方法要求视频服务器支持CORS（跨域资源共享），否则浏览器会拦截请求，出现跨域错误。

小优化：让下载文件名更友好 #

你现在代码里的download属性是写死的sd.mp4和hd.mp4，可以改成用接口返回的视频标题，这样用户下载的文件名会更清晰直观：

$("#sd").html('<a href="'+data.sd_download_url+'" class="btn btn-block btn-color" download="'+data.title+'_sd.mp4">Download SD</a>');
if(data.hd_download_url){
  $("#hd").html('<a href="'+data.hd_download_url+'" class="btn btn-block btn-color" download="'+data.title+'_hd.mp4">Download HD</a>');
}

总结 #

优先推荐方案1，直接修改服务器响应头，这是最稳定、兼容性最好的解决办法。如果实在没法修改服务器配置，再尝试方案2，但要注意跨域限制的问题。

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