HTML源码不能直接保存为Video文件，因为video标签仅是播放容器，真实视频资源需通过Network面板抓取MP4等直链地址下载；动态加载、流媒体或权限限制需针对性处理。
HTML源码本身不能“保存为Video代码”——video是播放容器，不是源码格式；你要的其实是提取或生成可播放的视频文件，或者把HTML内容录制成视频。
为什么直接保存HTML源码得不到video文件
HTML里<video>标签只是个播放器壳子，src指向的才是真实视频资源。你右键“查看源代码”看到的只是标签结构，不是MP4数据本身。复制保存成.html文件后双击打开，照样要联网加载src地址——如果那个地址已失效、带鉴权、或被跨域拦截，视频就播不了。
- 常见错误现象：
<video src="blob:https://...">或src="/api/video?id=123"这类地址无法直接下载 - 源码里没
src？说明视频由JS动态注入，必须用开发者工具抓Network请求 - 看到
.m3u8或.mpd？那是HLS/DASH流，不能当MP4直用，需专用工具合并
从HTML页面提取真实视频URL的实操步骤
目标是拿到能直接curl或粘贴到浏览器地址栏播放的.mp4（或其他直链格式）地址。
- 按
F12打开开发者工具 → 切到Network→ 点Media过滤器 - 播放视频，等几秒，找
Size最大、Type为video/mp4的请求项 - 右键该请求 →
Copy→Copy link address（不是Copy as cURL） - 把链接粘到新标签页：能直接播放 → 右键画面 →
另存为；若报403，检查Request Headers里有没有Referer或Cookie，缺失就得补全再试
HTML内容本身要转成MP4视频，别用canvas.captureStream()
虽然canvas.captureStream() + MediaRecorder看着像“一行转MP4”，但它实际输出的是webm，且严重受限：
立即学习“前端免费学习笔记（深入）”；
- 动画帧率不可控，
requestAnimationFrame一卡就丢帧 - 跨域图片、
iframe、WebGL内容直接报Tainted canvases may not be exported - 音频轨道完全不捕获，
<audio>标签静音，得额外开进程录系统声 - 导出的
webm在iOS/iPadOS上常打不开，必须用ffmpeg转一次
真要自动化生成MP4，唯一靠谱路径是：Puppeteer加载HTML → 逐帧截图PNG → ffmpeg -framerate 30 -i "frame_%05d.png" -pix_fmt yuv420p output.mp4。截图分辨率必须固定，PNG不能换JPEG，否则合成后边缘闪烁。
容易被忽略的关键点
很多人卡在“明明URL能播，却下不了”，其实问题不在技术而在权限细节：
-
blob:开头的地址只是内存引用，不是真实URL；必须回溯到它对应的原始fetch或XHR请求 - 有些网站用
Service Worker劫持媒体请求，Network里看不到MP4条目，得切到Application→Service Workers停用后再试 - 保存HTML源码时选错编码（比如ANSI）会导致中文乱码，后续JS执行异常，连带影响视频加载逻辑
