如何抓取网页Video标签中Blob URL的视频数据？含URL失效等场景

嘿，这个问题我之前帮好几个开发者踩过坑，咱们一步步拆解来解决：

为什么你的a标签下载会得到空文件？ #

Blob URL（比如blob:https://example.com/xxxx）本质上是浏览器内部临时引用，它只和当前页面内存中的Blob对象绑定。一旦页面刷新、脚本调用URL.revokeObjectURL()主动释放，或者网站通过某种机制清理了Blob，这个URL就彻底失效了——这就是你下载空文件的原因。

Blob URL未失效时的正确抓取方法 #

如果Blob还在内存中，别直接用现成的Blob URL去下载，而是先把Blob对象本身捞出来，再生成下载链接：

// 先定位到目标video元素
const targetVideo = document.querySelector('video[src^="blob:"]');
if (!targetVideo) {
  console.error('没找到带Blob URL的video标签');
  return;
}

// 通过fetch获取Blob对象（因为Blob URL是浏览器内部的，fetch能直接访问）
fetch(targetVideo.src)
  .then(response => response.blob())
  .then(blob => {
    const downloadLink = document.createElement('a');
    // 重新生成Blob URL（确保绑定的是刚拿到的Blob）
    downloadLink.href = URL.createObjectURL(blob);
    downloadLink.download = 'my-video.mp4'; // 自定义文件名
    downloadLink.click();
    // 用完记得释放URL，避免内存泄漏
    URL.revokeObjectURL(downloadLink.href);
  })
  .catch(err => console.error('获取Blob失败:', err));

Blob URL已被撤销？试试这些方法 #

如果已经错过时机，Blob URL失效了，就得看视频的加载源头：

1. 找原始视频请求 #

打开开发者工具的Network面板，筛选「Media」类型，看看有没有直接请求完整视频文件的记录（比如.mp4、.webm）。如果有，直接复制该请求的URL到新标签页下载即可——很多网站会先把视频下载成Blob再播放，原始请求可能还在。

2. 处理Media Source Extensions（MSE）场景 #

如果视频是通过MSE加载的（也就是你说的Blob关联Media Source），这时候网站会把视频切成很多小分片（比如.m4s、.ts），动态塞到MediaSource里播放。这种情况要分两步：

步骤1：收集所有视频分片

• 打开Network面板，筛选「Media」，播放视频时会看到一堆分片请求。你可以手动右键「Save response」把每个分片保存下来；
• 或者用脚本自动拦截并收集（比如写个Tampermonkey脚本）：

// Tampermonkey脚本示例，需在页面加载前注入
let videoChunks = [];
const originalFetch = window.fetch;

window.fetch = async (...args) => {
  const res = await originalFetch(...args);
  // 根据实际分片URL特征调整判断条件
  if (typeof args[0] === 'string' && (args[0].includes('.m4s') || args[0].includes('.ts'))) {
    const blob = await res.clone().blob();
    videoChunks.push(blob);
  }
  return res;
};

// 播放完成后合并分片（可手动在控制台调用）
window.mergeVideoChunks = () => {
  const mergedBlob = new Blob(videoChunks, { type: 'video/mp4' }); // 按实际视频类型调整
  const a = document.createElement('a');
  a.href = URL.createObjectURL(mergedBlob);
  a.download = 'merged-video.mp4';
  a.click();
  URL.revokeObjectURL(a.href);
  videoChunks = []; // 清空缓存
};

步骤2：合并分片成完整视频

有些分片格式（比如MP4的.m4s）需要处理容器结构，直接合并可能无法播放。这时候可以用ffmpeg工具来修复：

# 假设分片文件名是chunk_01.m4s, chunk_02.m4s...
cat chunk_*.m4s > temp.mp4
ffmpeg -i temp.mp4 -c copy final-video.mp4

重要提醒 #

• 防盗链：有些网站会给分片请求加签名或校验头（比如Cookie、Referer），如果手动下载分片失败，记得复制原请求的请求头信息再尝试；
• 版权：请确保你抓取的视频符合网站的服务条款，不要侵犯他人版权哦。

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