更改方向在Safari iOS上播放HTML5视频时会导致视频关闭

Question

我正在使用React和HTML5的标签渲染视频，当我在iPhone上打开网站时，视频会在本机iOS Safari视频播放器中播放。然而，当我改变方向以在横向模式下观看视频时，视频会关闭。我需要实现HTML5视频标签的某些配置吗？还是这是我React渲染的问题？

为了更好地理解，我正在开发一个算法可视化器，暂时不支持移动设备。因此，我使用一些媒体查询来显示一个模态框，告诉用户在移动设备上打开页面时要使用更大的屏幕。在模态框中，我有一个网站的演示视频，所以我希望人们能够在移动设备上正确观看视频，而不必在播放后更改方向时重新打开视频。

我在媒体查询方面遇到了一些问题，即在移动设备上更改为横向模式时，模态框会消失，并且会尝试渲染可视化器，因为我只使用了max-width查询。所以，我改为同时实现max-height媒体查询。这可能是问题吗？

带有示例的编辑：

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

const App = () => {
   // 使用ChakraUI hooks的媒体查询
   const [wIsSmallerThan48em] = useMediaQuery("(max-width: 48em)");
   const [hIsSmallerThan30em] = useMediaQuery("(max-height: 30em)");

  // 在移动设备上无论是纵向还是横向模式都呈现“错误”模态框
  if (wIsSmallerThan48em || hIsSmallerThan30em){
     return (
        <Modal>
            <Video src={MyVideo} />
        </Modal>
     )
  } else {
     return (
      <Visualizer />
     )
  }

}

Answer 1

在花了这么多时间来解决这个问题后，我感觉自己很愚蠢，但是我想把答案发出来，以防其他人遇到类似的问题。

问题与React的渲染过程有关。每当媒体查询更新时，<Modal/>会重新渲染，这在移动设备上更改方向时会发生。因此，当模态框在方向更改时重新渲染时，视频会关闭。我不确定为什么媒体查询会导致重新渲染（可能与ChakraUI hooks的设置有关），如果有人遇到这个问题，也许可以详细说明一下。但是，切换到状态解决了问题。

解决方法很简单：

const [wIsSmallerThan48em] = useMediaQuery("(max-width: 48em)");
  const [hIsSmallerThan30em] = useMediaQuery("(max-height: 30em)");
  
  const [showModal, setShowModal] = useState(false);

  useEffect(() => {
    if (wIsSmallerThan48em || hIsSmallerThan30em){
       setShowModal(true)
    } else {
       setShowModal(false)
    }
  }, [wIsSmallerThan48em, hIsSmallerThan30em])

  // 在移动设备上无论是纵向还是横向都渲染“错误”模态框
  if (showModal){
     return (
        <Modal>
            <Video src={MyVideo} />
        </Modal>
     )
  } else {
     return (
      <Visualizer />
     )
  }