React中WebSocket流式Video切页后自动播放暂停问题咨询

这确实是浏览器的后台标签页性能优化机制。为了节省系统资源（CPU、内存、网络带宽），主流浏览器都会对处于后台的标签页进行节流限制，其中就包括暂停视频渲染甚至媒体播放——哪怕你的视频已经设置了muted，只要涉及到视频帧的渲染，浏览器就可能在后台暂停它，直到切回标签页才恢复。

要实现类似YouTube那样切页后视频持续播放的效果，可以试试以下几种方案：

1. 用音频上下文保持页面活跃 #

浏览器对后台标签页的音频处理限制远低于视频渲染。你可以创建一个空的AudioContext实例，在视频播放时激活它，让浏览器认为页面有活跃的音频处理任务，从而不会暂停视频播放：

import { useRef } from 'react';

function VideoPlayer() {
  const videoRef = useRef(null);
  const audioContextRef = useRef(null);
  const videoSrc = ''; // 你的视频Blob地址

  const handlePlay = () => {
    // 初始化音频上下文
    if (!audioContextRef.current) {
      audioContextRef.current = new AudioContext();
    }
    // 处理浏览器自动播放策略，恢复暂停的音频上下文
    if (audioContextRef.current.state === 'suspended') {
      audioContextRef.current.resume();
    }
  };

  const handleOnEnded = () => {
    // 视频结束后关闭音频上下文，节省资源
    if (audioContextRef.current) {
      audioContextRef.current.close();
      audioContextRef.current = null;
    }
  };

  return (
    <video
      muted
      controls
      autoPlay
      src={videoSrc}
      width="640px"
      height="480px"
      onEnded={handleOnEnded}
      ref={videoRef}
      onPlay={handlePlay}
    />
  );
}

注意：浏览器的自动播放政策要求音频上下文必须在用户交互后才能激活，绑定到video的onPlay事件是稳妥的方式——无论是用户手动点击播放，还是autoPlay触发播放，都属于合法的用户交互场景。

2. 监听页面可见性，切回时自动恢复播放 #

如果第一种方案在部分浏览器不生效，或者你只需要切回标签页时自动恢复播放，可以监听document.visibilitychange事件：

import { useRef, useEffect } from 'react';

function VideoPlayer() {
  const videoRef = useRef(null);
  const videoSrc = ''; // 你的视频Blob地址

  const handleOnEnded = () => {
    // 你的结束逻辑
  };

  useEffect(() => {
    const handleVisibilityChange = () => {
      if (document.visibilityState === 'visible' && videoRef.current) {
        // 检查视频未播放完成且处于暂停状态时，恢复播放
        if (!videoRef.current.ended && videoRef.current.paused) {
          videoRef.current.play().catch(err => console.error('播放恢复失败:', err));
        }
      }
    };

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

  return (
    <video
      muted
      controls
      autoPlay
      src={videoSrc}
      width="640px"
      height="480px"
      onEnded={handleOnEnded}
      ref={videoRef}
    />
  );
}

这个方案无法让视频在后台持续渲染，但能确保切回标签页时立刻恢复播放，体验上接近持续播放的效果。

3. 优化WebSocket流式传输 #

部分情况下，后台标签页的WebSocket传输也会被浏览器节流，导致Blob数据无法持续接收，进而让视频暂停。你可以：

• 在WebSocket连接时设置pingInterval，定期发送心跳包保持连接活跃；
• 把依赖页面渲染的requestAnimationFrame替换为setTimeout，避免后台节流影响流式处理逻辑。

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