如何下载网页在线视频？JS实现及Chrome调试方案咨询

直接在页面源码里找不到视频资源是正常的，这类活动回放平台大多用分片流媒体传输，不会把完整mp4地址直接写在静态源码里，以下是实测有效的几种方法，包含JS实现方案：

方法1：开发者工具抓流+本地合并（无插件，成功率最高） #

• 打开视频播放页面，按F12调出Chrome开发者工具，切换到「Network」面板
• 在面板顶部筛选栏选择「Media」分类，也可以直接在搜索框输入m3u8/ts/mp4过滤无关请求
• 刷新页面后正常点击播放视频，面板里会实时列出加载的视频相关资源：
  • 如果出现后缀为.mp4的资源，右键该条目选择「Open in new tab」，在新标签页右键视频选择「视频另存为」即可直接下载
  • 如果出现后缀为.m3u8的索引文件，右键复制该文件的完整请求地址，本地安装ffmpeg工具后，在命令行执行ffmpeg -i "你复制的m3u8地址" -c copy 个人毕业仪式视频.mp4，等待命令执行完成就能得到无损的完整视频文件

方法2：页面注入JS脚本直接捕获下载地址 #

不需要额外装工具，直接在当前视频页面操作即可：

• 保持视频页面打开，按F12切换到「Console」控制台面板
• 先鼠标点击一次视频播放区域触发页面交互（Chrome默认拦截未经过用户交互的控制台脚本执行）
• 粘贴以下JS代码后按回车执行：

// 遍历页面所有视频元素
const videoList = document.querySelectorAll('video');
videoList.forEach((video, index) => {
  // 提取直链视频地址
  if (video.src) {
    const downloadLink = document.createElement('a');
    downloadLink.href = video.src;
    downloadLink.download = `毕业仪式视频_${index + 1}.mp4`;
    downloadLink.textContent = `点击下载视频${index + 1}`;
    downloadLink.style.cssText = 'position:fixed;top:20px;left:20px;z-index:99999;padding:10px 16px;background:#1677ff;color:#fff;border-radius:6px;cursor:pointer;text-decoration:none;';
    document.body.appendChild(downloadLink);
    console.log(`视频${index+1}直链地址：`, video.src);
  }
  // 捕获流媒体分片请求
  video.addEventListener('loadedmetadata', () => {
    const mediaResources = performance.getEntriesByType('resource')
      .filter(item => item.name.includes('.m3u8') || item.name.endsWith('.mp4'))
      .map(item => item.name);
    console.log('捕获到的流媒体地址列表：', [...new Set(mediaResources)]);
  });
});

• 脚本执行后页面左上角会生成固定的下载按钮，如果是直链视频点击按钮即可直接触发下载；如果是流媒体格式，控制台会打印对应的m3u8索引地址，配合方法1里的ffmpeg命令即可完成下载。

方法3：缓存提取法（适合不想装额外命令行工具的场景） #

• 打开视频页面，正常倍速或者原速播放完整个视频，不要快进跳过片段，确保所有视频分片都加载到本地缓存
• 按F12切换到「Application」面板，左侧边栏依次展开「Cache Storage」和「IndexedDB」分类，找到对应站点的缓存条目，里面就能找到已经加载完成的视频分片，按播放顺序导出后用本地视频合并工具拼接成完整文件即可。

注意：以上方法仅用于下载你个人享有合法使用权的毕业纪念视频，请勿用于侵犯他人版权的用途

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