网页src为blob协议的视频，能否通过<a>标签或新video元素下载？

我在网页中看到一个视频，其代码如下：

<video src="blob:https://somesite.com/123-456-789" ...>

尝试添加如下a标签下载时报错：

<a href="blob:https://somesite.com/123-456-789">Download</a>

想知道是否有可行的下载方法？

为什么直接用a标签指向Blob URL会报错？ #

Blob URL是浏览器为内存中的Blob对象或MediaSource生成的临时引用，它有以下核心限制：

• 上下文绑定：Blob URL仅在创建它的文档会话（同一域名、同一页面生命周期）内有效，跨上下文访问会被浏览器安全机制拦截。
• 资源类型限制：如果视频是通过MediaSource Extensions（MSE）加载的流媒体，Blob URL只是指向MSE的引用，并没有对应完整的二进制视频文件，直接访问自然会报错。
• 资源释放：如果原Blob对象已被URL.revokeObjectURL()释放，对应的Blob URL会立即失效。

可行的下载方法 #

1. 直接获取原Blob对象生成下载链接 #

如果页面中保留了视频对应的原始Blob对象（比如视频是通过FileReader或fetch转成Blob后加载的），可以通过JavaScript生成带download属性的下载链接：

// 获取页面中的video元素
const video = document.querySelector('video');
// 需根据页面实际逻辑获取对应的Blob实例（比如从创建Blob的变量中读取）
const videoBlob = ...; 

const downloadLink = document.createElement('a');
downloadLink.href = URL.createObjectURL(videoBlob);
downloadLink.download = 'my-video.mp4'; // 指定下载文件名
downloadLink.click();

// 下载完成后释放Blob URL资源，避免内存泄漏
URL.revokeObjectURL(downloadLink.href);

2. 拦截流媒体分段并合并（针对MSE加载的视频） #

如果视频是通过MSE分段加载的（比如常见的HLS/DASH流媒体），Blob URL仅指向MSE的媒体源，没有完整文件。这种情况下需要：

• 拦截页面中获取视频分段的fetch或XMLHttpRequest请求，保存所有分段的二进制数据。
• 将所有分段数据按顺序合并成一个完整的Blob。
• 再用上述方法生成下载链接。

注意：这种方法需要对页面的加载逻辑有一定了解，且可能受网站的防盗链、CORS限制影响。

3. 通过MediaRecorder录制视频流（适合可获取媒体流的场景） #

如果能获取到视频的媒体流，可以用MediaRecorder API录制完整的视频内容并下载：

const video = document.querySelector('video');
// 获取视频的媒体流
const stream = video.captureStream();
const recorder = new MediaRecorder(stream);
const chunks = [];

recorder.ondataavailable = e => chunks.push(e.data);
recorder.onstop = () => {
  const blob = new Blob(chunks, { type: 'video/mp4' });
  const a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.download = 'recorded-video.mp4';
  a.click();
  URL.revokeObjectURL(a.href);
};

// 开始录制，播放完成后停止
video.play();
recorder.start();
video.onended = () => recorder.stop();

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