React应用切换标签页时视频播放触发DOMException，寻求屏蔽报错方案

核心思路 #

这个错误是浏览器为了省电自动暂停后台视频时，未捕获play()方法返回的Promise拒绝导致的，只需针对性捕获并处理该特定异常即可，无需修改浏览器原生行为。

具体实现方式 #

1. 直接捕获play()的Promise异常 #

在调用视频play()的逻辑中添加异常捕获，仅忽略目标错误，保留对其他异常的处理：

const videoRef = useRef(null);

const playVideo = async () => {
  try {
    await videoRef.current.play();
  } catch (error) {
    // 仅忽略省电策略导致的特定错误
    if (error.message.includes('The play() request was interrupted because video-only background media was paused to save power')) {
      return;
    }
    // 其他播放异常正常上报或处理
    console.error('视频播放出错:', error);
  }
};

2. 监听页面可见性，主动暂停视频 #

通过document.visibilityState监听页面切换，在页面变为不可见时主动暂停视频，避免浏览器强制触发错误：

useEffect(() => {
  const handleVisibilityChange = () => {
    if (document.visibilityState === 'hidden' && videoRef.current) {
      videoRef.current.pause();
    }
  };

  document.addEventListener('visibilitychange', handleVisibilityChange);
  return () => {
    document.removeEventListener('visibilitychange', handleVisibilityChange);
  };
}, []);

3. 封装自定义视频组件整合逻辑 #

如果项目中多处用到视频播放，可以把异常处理和页面监听逻辑封装到组件里，减少重复代码：

const CustomVideo = ({ src, ...props }) => {
  const videoRef = useRef(null);

  useEffect(() => {
    const handleVisibilityChange = () => {
      if (document.visibilityState === 'hidden' && videoRef.current) {
        videoRef.current.pause();
      }
    };

    document.addEventListener('visibilitychange', handleVisibilityChange);
    return () => {
      document.removeEventListener('visibilitychange', handleVisibilityChange);
    };
  }, []);

  const handlePlay = async () => {
    try {
      await videoRef.current.play();
    } catch (error) {
      if (!error.message.includes('The play() request was interrupted because video-only background media was paused to save power')) {
        console.error('视频播放异常:', error);
      }
    }
  };

  return (
    <video ref={videoRef} src={src} onClick={handlePlay} {...props} />
  );
};

注意事项 #

• 不要忽略所有异常，仅针对性处理省电策略导致的错误，避免掩盖其他真实的播放故障。
• 主动监听页面可见性的方式更友好，能减少浏览器的强制干预，同时从根源避免错误抛出。

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