Menukar orientasi menyebabkan video ditutup apabila memainkan video HTML5 pada Safari iOS

Question

Saya sedang memaparkan video menggunakan teg

Untuk pemahaman yang lebih baik, saya sedang membangunkan visualizer algoritma, yang tidak disokong pada peranti mudah alih pada masa ini. Jadi saya menggunakan beberapa pertanyaan media untuk memaparkan modal yang memberitahu pengguna untuk menggunakan skrin yang lebih besar apabila membuka halaman pada peranti mudah alih. Dalam modal saya mempunyai video demo untuk tapak web, jadi saya mahu orang ramai dapat menonton video dengan betul pada peranti mudah alih tanpa perlu membuka semula video apabila orientasi berubah selepas dimainkan.

Saya menghadapi beberapa masalah dengan pertanyaan media di mana apabila menukar kepada mod landskap pada mudah alih, mod hilang dan visualizer cuba untuk membuat kerana saya hanya menggunakan pertanyaan lebar maksimum. Jadi, saya juga melaksanakan pertanyaan media ketinggian maksimum. Mungkinkah ini masalahnya?

Edit dengan contoh:

const Video = ({ src }) =>
   kembali (
      <video mengawal lebar="100%" pramuat="auto">
         <sumber src={src} type="video/mp4"
         Penyemak imbas anda tidak menyokong video HTML5.
      </video>
   )
}

const App = () =>
   // Pertanyaan media menggunakan cangkuk ChakraUI
   const [wIsSmallerThan48em] = useMediaQuery("(lebar maksimum: 48em)");
   const [hIsSmallerThan30em] = useMediaQuery("(max-height: 30em)");

  // Render mod "salah" pada peranti mudah alih tanpa mengira mod potret atau landskap
  jika (wIsSmallerThan48em || hIsSmallerThan30em){
     kembali (
        <Modal>
            <Video src={Video Saya} />
        </Modal>
     )
  } lain {
     kembali (
      <Visualizer />
     )
  }

}

Answer 1

Saya berasa bodoh selepas menghabiskan banyak masa untuk menyelesaikan masalah ini, tetapi saya ingin menyiarkan jawapan sekiranya orang lain mengalami masalah yang sama.

Masalah ini berkaitan dengan proses rendering React. <Modal/> dipaparkan semula setiap kali pertanyaan media dikemas kini, yang berlaku apabila orientasi berubah pada peranti mudah alih. Jadi apabila modal memaparkan semula pada perubahan orientasi, video ditutup. Saya tidak pasti mengapa pertanyaan media menyebabkan render semula (mungkin ada kaitan dengan tetapan cangkuk ChakraUI), jika sesiapa mempunyai masalah ini mungkin ia boleh dihuraikan. Walau bagaimanapun, bertukar kepada status menyelesaikan masalah.

Penyelesaiannya mudah sahaja:

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