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

右键“另存为”无法保存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，得换代理或服务端配合。