iOS Safari中HTML5视频切换方向自动关闭的问题排查

在React中使用HTML5 <video>标签渲染视频时，在iPhone的Safari浏览器打开网站，视频会在iOS原生播放器中播放，但切换至横屏模式时视频自动关闭。请问是否需要对HTML5 video标签做特定配置？或是React渲染逻辑有问题？

补充背景：我正在开发一款算法可视化工具，目前暂不支持移动端，因此通过媒体查询在移动端展示提示模态框，告知用户使用大屏设备访问。模态框内包含网站演示视频，希望用户在移动端可正常观看视频，切换方向后无需重新打开。

此前仅使用max-width媒体查询时，移动端切换至横屏模态框会消失并尝试渲染可视化工具，因此我新增了max-height媒体查询。这是否可能是导致视频关闭的原因？

示例代码：

const Video = ({ src }) => {
   return (
      <video controls width="100%" preload="auto">
         <source src={src} type="video/mp4" />
         Your browser does not support HTML5 video.
      </video>
   )
}

const App = () => {
   // Media Queries using ChakraUI hooks
   const [wIsSmallerThan48em] = useMediaQuery("(max-width: 48em)");
   const [hIsSmallerThan30em] = useMediaQuery("(max-height: 30em)");

  // renders "error" modal on mobile regardless of portrait or landscape
  if (wIsSmallerThan48em || hIsSmallerThan30em){
     return (
        <Modal>
            <Video src={MyVideo} />
        </Modal>
     )
  } else {
     return (
      <Visualizer />
     )
  }

}

核心原因：组件频繁卸载导致视频中断 #

你新增的max-height媒体查询确实是问题根源。当iPhone切换横屏时，屏幕高度会触发max-height:30em的条件变化，导致React重新执行App组件的渲染逻辑——如果横屏时高度刚好跨过30em阈值，App会短暂卸载模态框和视频组件再重新挂载，正在播放的视频会因此被中断关闭。

另外，iOS Safari的原生播放器和页面DOM状态强绑定，一旦视频组件被卸载，原生播放器会自动关闭。

具体修复步骤 #

1. 优化媒体查询逻辑，避免不必要的组件卸载 #

不要直接用实时媒体查询结果作为渲染分支的判断条件，改用缓存的状态来判定是否为移动端，避免横竖屏切换时频繁触发组件卸载：

const App = () => {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const checkIsMobile = () => {
      const isWidthSmall = window.matchMedia("(max-width: 48em)").matches;
      const isHeightSmall = window.matchMedia("(max-height: 30em)").matches;
      const currentIsMobile = isWidthSmall || isHeightSmall;
      // 仅当状态真的改变时更新，避免频繁重渲染
      if (currentIsMobile !== isMobile) {
        setIsMobile(currentIsMobile);
      }
    };

    // 初始检查设备状态
    checkIsMobile();
    // 监听窗口变化，仅在状态变更时更新
    window.addEventListener('resize', checkIsMobile);
    return () => window.removeEventListener('resize', checkIsMobile);
  }, [isMobile]);

  if (isMobile){
     return (
        <Modal>
            <Video src={MyVideo} />
        </Modal>
     )
  } else {
     return (
      <Visualizer />
     )
  }
}

2. 配置video标签，让视频在页面内播放（可选） #

如果希望视频不跳转到iOS原生播放器，而是在模态框内直接播放，可以添加playsinline属性（配合webkit-playsinline兼容旧版Safari）：

const Video = ({ src }) => {
   return (
      <video 
        controls 
        width="100%" 
        preload="auto"
        playsinline
        webkit-playsinline
      >
         <source src={src} type="video/mp4" />
         你的浏览器不支持HTML5视频。
      </video>
   )
}

这个属性能让视频在页面上下文内播放，避免触发原生全屏播放器，减少DOM变化导致的播放中断。

3. 保存视频播放进度（可选） #

如果必须保留媒体查询的实时响应，可以通过useRef保存视频实例和播放进度，在组件重新挂载时恢复播放：

const Video = ({ src }) => {
  const videoRef = useRef(null);
  const [playbackTime, setPlaybackTime] = useState(0);

  // 实时保存播放进度
  const handleTimeUpdate = () => {
    if (videoRef.current) {
      setPlaybackTime(videoRef.current.currentTime);
    }
  };

  // 组件挂载后恢复进度并继续播放
  useEffect(() => {
    if (videoRef.current && playbackTime > 0) {
      videoRef.current.currentTime = playbackTime;
      videoRef.current.play();
    }
  }, []);

  return (
    <video 
      ref={videoRef}
      controls 
      width="100%" 
      preload="auto"
      playsinline
      webkit-playsinline
      onTimeUpdate={handleTimeUpdate}
    >
      <source src={src} type="video/mp4" />
      你的浏览器不支持HTML5视频。
    </video>
  )
}

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