使用Pixi重启视频纹理时Firefox偶现null源警告

阿华AIGC实验室

2026-5-19

解决Firefox中PixiJS视频纹理重启时的null源警告问题

我之前在做PixiJS视频纹理项目时也碰到过一模一样的问题——视频能正常重启播放，但Firefox每隔几次就会弹出烦人的null源警告。折腾了一阵后，发现这主要是Firefox对媒体资源的回收机制比其他浏览器更严格，加上我们的重置流程没给浏览器足够时间清理旧资源导致的。下面分享几个亲测有效的解决方法：

1. 规范视频元素的重置流程，先清理旧资源

不要直接粗暴地修改currentTime或者重新设置视频源，而是先通过空Blob让浏览器彻底清理旧的媒体资源，再重新加载原视频。这样能避免资源冲突导致的null源警告：

async function restartVideo(videoEl, originalSrc) {
  // 先暂停视频，避免播放状态下修改资源
  videoEl.pause();
  
  // 加载空Blob清理旧资源
  videoEl.src = URL.createObjectURL(new Blob());
  await videoEl.load();
  
  // 重新设置原视频源并加载
  videoEl.src = originalSrc;
  await videoEl.load();
  
  // 启动播放并更新Pixi纹理
  videoEl.play();
  videoTexture.update();
}

2. 复用视频纹理实例，避免频繁创建

如果每次重启都新建PIXI.VideoTexture实例，很容易导致未被回收的旧纹理残留，触发浏览器的资源警告。尽量复用同一个纹理对象，每次重启后调用videoTexture.update()就能刷新内容。

3. 捕获并忽略特定的null源错误

如果上面的方法还偶尔出现警告，可以给视频元素添加错误监听，专门捕获这个null源的无效错误，阻止它显示在控制台：

videoEl.addEventListener('error', (e) => {
  const error = e.target.error;
  // 判断是否是我们要忽略的null源错误
  if (error?.code === error.MEDIA_ERR_SRC_NOT_SUPPORTED && !e.target.src) {
    e.preventDefault();
    return;
  }
  // 其他真实错误还是要正常处理
  console.error('视频加载异常:', error);
});