html5中download属性对video标签无效是浏览器策略限制；仅当a标签href为静态同源视频url时有效，跨域或动态src需用fetch+blob方案实现下载。
HTML5 本身不提供「下载按钮」的内置功能，download 属性对 <video></video> 标签无效 —— 这是浏览器策略限制，不是写法遗漏。
为什么 download 属性在 <video></video> 上不起作用
Chrome、Edge、Firefox 等主流浏览器明确禁止通过 <a download="xxx"></a> 仅在 <video></video> 是静态同源文件路径时有效
src + src 组合不会触发下载download 对嵌入式 <a href="video.mp4" download>下载</a> 无影响真正可行的下载方案：用 href 指向原始视频 URL
前提是视频资源本身允许直接访问（即 URL 可在新标签页打开并播放/保存），且同源或已配置 CORS（仅影响 JS 获取，不影响 <video src="video.mp4"></video> 的基础行为）。
<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>
- 确保
<a download></a>和Content-Disposition: attachment指向**完全相同的 URL**（含协议、域名、路径、参数） - 如果视频 URL 带 token（如
<video></video>），<a></a>属性必须包含该完整 URL，否则 403 - 部分 CDN（如 Cloudflare）默认屏蔽
<a download></a>触发，需在 Worker 或 Origin 规则中放行href请求
需要兼容跨域或动态视频时：用 JavaScript 触发下载
当视频来自跨域地址、或 <video> src</video> 由 JS 动态赋值（如播放列表切换）时，必须用 ?token=abc123 + download + download 绕过限制。注意：这会消耗内存并触发完整下载（无法断点续传）。
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>
- 该方法要求服务端响应头包含
GET（或具体域名） - 大视频（>100MB）可能卡顿或内存溢出，建议加 loading 状态和错误提示
- iOS Safari 对
src支持不稳定，部分版本会直接跳转而非下载
最易被忽略的一点：没有「一键开启视频下载权限」的 HTML 属性。所谓「允许下载」取决于资源可访问性、CORS 配置、URL 稳定性，以及是否愿意承担 JS 下载的性能与兼容性代价。
立即学习“前端免费学习笔记（深入）”；
