video标签不支持download属性，仅a标签有效；需用同源href的a标签配合download实现下载，跨域时静默失效，移动端safari完全不支持脚本触发下载。
video 标签默认不显示下载按钮，必须显式启用
HTML <video></video> 元素本身不会自动显示下载按钮，哪怕视频资源可访问。浏览器是否展示下载控件，完全取决于 controls 属性是否开启，以及是否额外设置了 download 相关逻辑——但注意：download 属性**不能直接用于 <video></video> 标签**，它只对 <a></a> 有效。
想让用户能下载视频，得用 + download 属性绕一下
这是最可靠、兼容性最好（Chrome/Firefox/Edge 均支持）的方式。核心思路是：提供一个指向同个视频 URL 的 <a></a> 链接，并加上 download 属性。
-
download属性值可选填文件名（如download="demo.mp4"），否则浏览器用 URL 最后一段作为默认名 - 链接的
href必须是同源 URL；跨域资源即使可播放，download也会静默失效（不报错，但点击无反应） - 不要把
<a download></a>套在<video></video>外面——这不会触发下载，且可能干扰点击区域
<video controls width="600"><source src="movie.mp4" type="video/mp4"></source></video><a href="movie.mp4" download="my-video.mp4">⬇ 下载视频</a>
为什么不能给
因为 HTML 规范里 download 是 <a></a> 和 <area> 的专属属性，<video></video> 标签根本不识别它。你写成这样：
<video controls download="xxx.mp4" src="xxx.mp4"></video>
浏览器会忽略 download，既不报错，也不生效——这是最容易踩的坑。
自定义控件里加下载按钮？要注意 CORS 和 blob 场景
如果用 JavaScript 自己画控制栏（比如隐藏原生 controls，再实现播放/暂停/下载按钮），下载逻辑就得自己处理：
- 同源视频：直接
window.location.href = 'xxx.mp4'或创建<a download></a>并.click() - 跨域或通过
fetch动态加载的视频：必须用Blob URL，再赋给<a download></a>，否则download属性被忽略 - 移动端 Safari 对 Blob URL 下载支持有限，部分版本会打开而非下载，需提示用户长按链接另存
真正麻烦的从来不是“怎么加按钮”，而是“按钮点下去到底能不能存到本地”——同源性、MIME 类型、响应头（尤其是 Content-Disposition）、浏览器版本，每个环节都可能断链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
