HTML5视频添加下载按钮技巧

<video controls width="640" height="360">
  <source src="https://example.com/videos/demo.mp4" type="video/mp4">
</video>

<a href="https://example.com/videos/demo.mp4" download="demo.mp4">
  <button>下载此视频</button>
</a>

• 确保 href 和 指向**完全相同的 URL**（含协议、域名、路径、参数）
• 如果视频 URL 带 token（如 ?token=abc123），download 属性必须包含该完整 URL，否则 403
• 部分 CDN（如 Cloudflare）默认屏蔽 download 触发，需在 Worker 或 Origin 规则中放行 GET 请求

需要兼容跨域或动态视频时：用 JavaScript 触发下载

当视频来自跨域地址、或 src 由 JS 动态赋值（如播放列表切换）时，必须用 fetch + Blob + URL.createObjectURL 绕过限制。注意：这会消耗内存并触发完整下载（无法断点续传）。

async function downloadVideo(videoElement) {
  const src = videoElement.src;
  try {
    const res = await fetch(src);
    const blob = await res.blob();
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'video.mp4'; // 可用 videoElement.dataset.filename 替代硬编码
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  } catch (err) {
    console.error('下载失败:', err);
  }
}

// 使用示例：
// <button onclick="downloadVideo(document.getElementById('myVideo'))">下载</button>

• 该方法要求服务端响应头包含 Access-Control-Allow-Origin: *（或具体域名）
• 大视频（>100MB）可能卡顿或内存溢出，建议加 loading 状态和错误提示
• iOS Safari 对 createObjectURL 支持不稳定，部分版本会直接跳转而非下载

最易被忽略的一点：没有「一键开启视频下载权限」的 HTML 属性。所谓「允许下载」取决于资源可访问性、CORS 配置、URL 稳定性，以及是否愿意承担 JS 下载的性能与兼容性代价。

以上就是《HTML5视频添加下载按钮技巧》的详细内容，更多关于的资料请关注golang学习网公众号！