保存html源码无法离线播放视频，必须用开发者工具network面板捕获真实视频请求并下载文件，再修改html中src为本地路径。
直接保存 HTML 源码不会保留视频文件，只存下 <video></video> 标签和 src 属性值——而这个地址很可能失效或带防盗链校验。 你真正需要的不是“保存源码”，而是“获取并落地视频资源本身”，再按需重建可离线播放的 HTML 页面。
用浏览器“查看页面源代码”只能拿到 src 地址，不是视频文件
这是最常踩的坑：右键 → “查看页面源代码” → Ctrl+S 保存为 backup.html，结果双击打开后视频黑屏、报错或 403。因为：
-
src值可能是相对路径（如./videos/intro.mp4），本地打开时找不到对应文件 - 服务端可能校验
Referer或Cookie，直接在新标签页访问该 URL 会拒绝响应 - 有些网站用 JS 动态设置
src，源码里根本没写死地址，必须靠开发者工具抓请求
必须用开发者工具 Network 面板捕获真实视频请求
这是目前最可靠、适用性最广的方法，尤其对 React/Vue 等 SPA 页面有效：
- 打开目标网页，按
F12→ 切到Network面板 → 点击Media过滤器 - 刷新页面，然后播放视频（部分视频需手动触发播放才发起请求）
- 在列表中找体积最大、类型为
mp4/webm/mov的条目；若看到m3u8或mpd，说明是 HLS/DASH 流，需额外工具合并 - 右键该请求 →
Copy→Copy link address，把链接粘贴到新标签页验证是否可直访 - 若能播放，右键视频画面 →
另存为；若提示 403，需右键 →Open in new tab后用curl -H "Referer: https://example.com/" -H "User-Agent: Mozilla/5.0" [URL] -o video.mp4补全头信息下载
保存后的 HTML 文件要改 src 路径才能离线播放
你已经下载了 video.mp4，但原始 HTML 里的 <video src="https://cdn.example.com/v.mp4"></video> 还是指向线上地址。必须手动修改：
- 用 VS Code 或记事本打开你保存的
backup.html - 搜索
<video> 和 <code><source>，把所有 <code>src="..."替换为本地相对路径，例如src="video.mp4" - 确保视频文件和 HTML 文件在同一目录，或按实际层级调整路径（如
src="assets/video.mp4"） - 保存后双击 HTML 文件，视频应可正常加载——如果仍失败，检查浏览器控制台是否报
Not allowed to load local resource，那是 Chrome 安全策略限制，换 Edge/Firefox 或用python3 -m http.server 8000启个本地服务打开
关键点在于：HTML 源码只是“说明书”，视频才是“实物”。不提取并落地视频文件本身，光保存 HTML 就像只留菜谱却不买食材——看着完整，做不出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
