如何用Puppeteer获取iframe #document中的MP4视频源？

我之前爬取jkanime视频的时候也遇到过一模一样的问题——视频源藏在iframe的文档里，DevTools里能轻松拿到，但用Puppeteer就卡壳了。先说说你初始代码里的问题，再给你看最终的解决办法：

初始代码的问题 #

你拿到iframe的frame对象后，直接把它传给cheerio解析是行不通的，因为frame是Puppeteer的Frame实例，不是HTML字符串。cheerio没法直接处理这个对象，自然拿不到里面的视频源。

正确的实现方式 #

既然已经获取到了iframe对应的Frame对象，咱们直接在这个frame的上下文里执行DOM查询就好了，完全不需要cheerio。利用Puppeteer的frame.$eval()方法，就能模拟DevTools里的查询操作：

const getAnimeVideo = async (id: string, chapter: number) => { 
  const BASE_URL = `${url}${id}/${chapter}/` // => https://jkanime.net/tokyo-ghoul/1/ 
  const browser = await puppeteer.launch() 
  const page = await browser.newPage() 
  await page.goto(BASE_URL); 
  const elementHandle = await page.$('.player_conte') 
  const frame = await elementHandle.contentFrame(); 
  // 关键：在frame上下文里查询视频元素的source标签，提取src
  const videoSources = await frame.$eval('#jkvideo_html5_api', el => 
    Array.from(el.getElementsByTagName('source')).map(source => source.getAttribute("src"))
  ); 
  // 按你期望的格式返回
  const result = { src: videoSources };
  console.log(result);
  // 记得关闭浏览器，避免资源泄漏
  await browser.close();
  return result;
}

代码解释 #

1. frame.$eval('#jkvideo_html5_api', ...)：在iframe的文档里找到id为jkvideo_html5_api的视频元素
2. Array.from(el.getElementsByTagName('source'))：把视频元素下的所有<source>标签转换成数组（因为getElementsByTagName返回的是类数组对象）
3. map(source => source.getAttribute("src"))：逐个提取每个source标签的src属性，也就是MP4的地址

这样运行后，就能得到你想要的格式：

{ "src": [ "https://storage.googleapis.com/markesito.appspot.com/tokgho/01.mp4" ] }

内容的提问来源于stack exchange，提问作者Chris Michael