如何查找无src属性的video元素的视频源以获取原始视频数据

以下方法按操作复杂度从低到高排列，可依次尝试：

• 检查video子节点：很多站点不会把媒体地址直接写在video标签的src属性上，而是通过嵌套的<source>子标签承载地址，在元素检查面板展开video标签的子节点，就能看到source标签上的src值。
• 抓取网络面板的媒体请求：打开开发者工具切换到「网络」面板，筛选器选择「媒体」分类，刷新页面后触发视频播放，面板中列出的*.mp4/.webm/.m3u8等格式请求就是实际加载的视频源。如果是HLS分片的m3u8地址，复制后用支持流媒体解析的工具即可获取完整视频文件。
• 控制台直接读取元素属性：video元素对象的currentSrc属性会返回浏览器当前实际加载播放的媒体地址，不管地址是写在video标签上、source子标签上，还是通过JS动态赋值，都能准确获取。在控制台执行以下代码即可批量输出页面所有视频的真实源地址：

document.querySelectorAll('video').forEach((video, idx) => {
  console.log(`第${idx + 1}个视频源地址：`, video.currentSrc || video.src);
});

• 断点追踪地址赋值逻辑：如果前面方法拿到的是带时效签名的临时地址，需要找到地址生成规则，可以在元素面板选中目标video标签，右键选择「打断点 > 属性修改」，之后触发视频加载，调试器会自动暂停在修改video媒体地址的JS代码位置，顺着调用栈向上追溯就能找到原始地址的生成逻辑。

流媒体类站点通常不会在初始返回的HTML里写入媒体地址，而是在页面加载完成后通过JS异步给video元素赋值，这种情况下静态检查初始HTML标签属性自然找不到src值，用上述动态读取、抓包的方式即可绕过这个问题。

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