右键“另存为”无法保存HTML5视频,因视频多通过动态加载,地址常带鉴权、分片或跨域限制;需用开发者工具在Network中筛选mp4/media请求获取真实URL下载。

网页里右键“另存为”为什么存不到视频?
因为多数 HTML5 视频是通过 标签 + src 属性或 加载的,但资源地址可能是动态生成、带鉴权头、分片(如 HLS/DASH)、或被 Cross-Origin 限制——浏览器右键菜单根本不会显示“视频另存为”选项,或者点了也没用。
用开发者工具找真实视频地址(最常用有效)
打开网页后按 F12 → 切到 Network 标签 → 播放视频 → 在筛选栏输入 mp4、blob 或 media → 找到请求方法为 GET、响应类型为 video/mp4 的条目:
- 如果地址是完整 HTTP/HTTPS 链接(如
https://xxx.com/video.mp4?token=abc),复制它,用下载工具或浏览器新标签页打开即可直接下载 - 如果看到的是
blob:https://...,说明视频被 JS 读取后转成 Blob URL,需进一步提取原始响应(见下一条) - 注意检查请求头里是否有
Referer或Cookie,缺失可能导致 403;可右键“Copy as cURL”,粘贴到终端或 Postman 中补全再试
处理 blob URL:用控制台导出 ArrayBuffer
当 Network 里只看到 blob: 地址,且点开 preview 是视频画面,说明原始数据已加载进内存。此时可在控制台运行:
fetch('https://example.com/real-video-url.mp4') // 替换为实际请求 URL(从 Network 中 copy)
.then(r => r.arrayBuffer())
.then(buf => {
const blob = new Blob([buf], {type: 'video/mp4'});
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = 'video.mp4';
a.click();
});
⚠️ 注意:这个 fetch 地址必须是你在 Network 中找到的真实请求路径,不是 blob URL;若跨域失败,说明服务端没配 Access-Control-Allow-Origin,得换代理或服务端配合。
立即学习“前端免费学习笔记(深入)”;
遇到 m3u8 / mpd 分片流怎么办?
HTML5 页面用 HLS(.m3u8)或 DASH(.mpd)时,Network 里看到的是文本索引文件,不是视频本身。不能直接下载,必须合并分片:
- 先确认是否为 HLS:在 Network 中搜
m3u8,点开预览看内容是否含#EXTM3U - 用命令行工具处理最稳:
ffmpeg -i "https://xxx.com/index.m3u8" -c copy output.mp4(需安装 FFmpeg) - Windows 用户可用
MP4Box(DASH)或图形化工具如N_m3u8DL-CLI,但务必核对工具是否支持该站点的加密(如 AES-128)和 Referer 校验
真正麻烦的从来不是格式转换,而是地址拿不全、权限校验绕不过、或 JS 动态拼接 URL 且加了时间戳/签名——这时候就得扒源码,盯死 video.src 赋值逻辑或 XHR/fetch 调用栈。










