为何两个video元素无法共用同一个Blob URL加载视频资源

云上老周

2026-10-8

问题原因

Blob URL存在安全上下文绑定：blob:https://odysee.com/xxx 中的域名标记了该Blob所属的页面安全上下文，只有同上下文的代码能访问对应内存对象。如果你的自定义video是在扩展的隔离上下文（如内容脚本独立作用域、扩展弹窗/侧边栏）创建，会无权限读取Blob数据，抛出MIME类型错误。
Odysee采用MediaSource Extensions(MSE)加载视频：你拿到的Blob URL指向的是动态分段加载的MediaSource实例，而非完整视频文件，这类流默认仅支持一个消费者，直接赋值给第二个video元素时会因流被锁定/消费完毕无法加载。
站点会主动销毁临时Blob URL：Odysee的播放器逻辑会在特定时机调用URL.revokeObjectURL()回收创建的Blob链接，即使上下文相同也可能出现访问失效的情况。

解决方案

方案一：页面上下文内创建播放器（推荐）

通过内容脚本向Odysee页面注入JS代码，在页面本身的安全上下文内创建自定义video元素，避免跨上下文权限问题：

// 扩展内容脚本执行的注入逻辑
const injectedCode = document.createElement('script');
injectedCode.textContent = `
  // 页面上下文内执行的逻辑
  const originPlayer = document.querySelector('#player-container video');
  const customPlayer = document.createElement('video');
  customPlayer.controls = true;
  customPlayer.style.cssText = 'width: 500px; position: fixed; top: 20px; right: 20px; z-index: 99999;';

  // 优先复用srcObject，兼容性更好
  if (originPlayer.srcObject) {
    customPlayer.srcObject = originPlayer.srcObject;
  } else {
    customPlayer.src = originPlayer.src;
  }

  document.body.appendChild(customPlayer);
`;
document.documentElement.appendChild(injectedCode);
injectedCode.remove();