更改方向在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 />
     )
  }