本文介绍如何通过无头浏览器工具（如 puppeteer 或 playwright）自动化提取嵌入式 iframe 视频播放页中的真实视频地址，并批量下载，替代耗时的手动 network 面板查找与逐个保存操作。
本文介绍如何通过无头浏览器工具（如 puppeteer 或 playwright）自动化提取嵌入式 iframe 视频播放页中的真实视频地址，并批量下载，替代耗时的手动 network 面板查找与逐个保存操作。
要实现对类似 https://www.php.cn/link/c60e7d24e22cb7c59788e690275ff4df 这类动漫聚合页的批量视频下载，核心在于复现并自动化你当前在浏览器开发者工具中完成的手动流程——即：打开页面 → 定位播放 iframe → 触发播放行为 → 捕获网络请求中的 .mp4、.m3u8 或 blob: 等有效媒体资源链接。
整个过程可分为四个关键阶段：
1. 页面导航与播放器加载控制
使用 Puppeteer（Node.js）或 Playwright（支持多语言）启动无头浏览器，访问目标番剧主页。需注意：该页面通常包含多个“播放按钮”或“集数列表”，需先解析 DOM 获取所有可点击的播放入口（如 @#@#@#@#@#@#@#@#@#@1），再逐个跳转至对应 iframe 播放页。
2. 动态内容触发与网络请求监听
iframe 内容往往延迟加载或依赖用户交互（如点击“播放”才发起视频请求）。因此不能仅靠静态 HTML 解析。正确做法是：
- 使用
page.goto()加载播放页； - 通过
page.waitForSelector()等待播放按钮或 iframe 加载完成； - 调用
page.click()模拟点击，触发 JS 初始化； - 启用
page.on('response', ...)监听所有响应，结合response.url()和response.request().resourceType()筛选media类型响应，匹配video/,.mp4,.m3u8,.ts, 或blob:URL。
示例片段（Puppeteer）：
page.on('response', async (response) => {
const url = response.url();
const type = response.request().resourceType();
if (type === 'media' && (url.includes('.mp4') || url.includes('.m3u8'))) {
console.log('Found video source:', url);
videoUrls.push(url);
}
});
3. 视频链接提取与去重归一化
部分站点使用 HLS（.m3u8）流，需额外处理分片；有些返回的是 Blob URL（如 blob:https://...），此时需在页面上下文中调用 URL.createObjectURL() 的逆向逻辑不可行，应优先捕获其上游 fetch() 或 XHR 请求的真实 src。建议对捕获链接做标准化处理：过滤重复项、排除 404 响应、添加 user-agent 头以绕过简单防盗链。
4. 批量下载与文件管理
收集全部有效视频 URL 后，可借助 node-fetch 或 axios 发起流式下载，并按标题/集数命名保存（例如 Frieren_S01E01.mp4）。为提升稳定性，建议添加：
- 并发限制（如同时下载 ≤3 个）；
- 自动重试机制（网络超时/5xx 错误）；
- 下载进度日志与失败清单记录。
⚠️ 注意事项：
- 尊重网站
robots.txt及服务条款，避免高频请求（建议间隔 1–2 秒）； - 部分视频资源受 Referer 或 Cookie 保护，需保持会话上下文（Puppeteer 中复用同一
browser实例）； - 若目标站采用 WebAssembly 解密或动态 token（如时间戳+签名），则需逆向 JS 逻辑，此时单纯网络监听不够，需注入自定义脚本提取密钥生成逻辑。
综上，这不是传统静态爬虫任务，而是一套「浏览器自动化 + 网络层嗅探 + 智能资源识别」的组合方案。从 Puppeteer 入手学习成本较低，Playwright 则在跨浏览器兼容性与抗检测方面更优。掌握基础后，即可将整个流程封装为命令行工具：输入番剧 URL，自动解析集数、抓取视频源、并行下载，真正实现一键离线收藏。
