html5改格式网页视频_转mp4存本地简单实现【技巧】

右键“另存为”无法保存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 调用栈。