<p>我正在使用React和HTML5的<code>&lt;video&gt;</code>标签渲染视频，当我在iPhone上打开网站时，视频会在本机iOS Safari视频播放器中播放。然而，当我改变方向以在横向模式下观看视频时，视频会关闭。我需要实现HTML5视频标签的某些配置吗？还是这是我React渲染的问题？</p> <p>为了更好地理解，我正在开发一个算法可视化器，暂时不支持移动设备。因此，我使用一些媒体查询来显示一个模态框，告诉用户在移动设备上打开页面时要使用更大的屏幕。在模态框中，我有一个网站的演示视频，所以我希望人们能够在移动设备上正确观看视频，而不必在播放后更改方向时重新打开视频。</p> <p>我在媒体查询方面遇到了一些问题，即在移动设备上更改为横向模式时，模态框会消失，并且会尝试渲染可视化器，因为我只使用了max-width查询。所以，我改为同时实现max-height媒体查询。这可能是问题吗？</p> <p>带有示例的编辑：</p> <pre class="brush:php;toolbar:false;">const Video = ({ src }) =&gt; { return ( &lt;video controls width=&quot;100%&quot; preload=&quot;auto&quot;&gt; &lt;source src={src} type=&quot;video/mp4&quot; /&gt; 您的浏览器不支持HTML5视频。 &lt;/video&gt; ) } const App = () =&gt; { // 使用ChakraUI hooks的媒体查询 const [wIsSmallerThan48em] = useMediaQuery(&quot;(max-width: 48em)&quot;); const [hIsSmallerThan30em] = useMediaQuery(&quot;(max-height: 30em)&quot;); // 在移动设备上无论是纵向还是横向模式都呈现“错误”模态框 if (wIsSmallerThan48em || hIsSmallerThan30em){ return ( &lt;Modal&gt; &lt;Video src={MyVideo} /&gt; &lt;/Modal&gt; ) } else { return ( &lt;Visualizer /&gt; ) } }</pre></p>

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 />
     )
  }