<p>Saya sedang memaparkan video menggunakan teg <kod><video></code> React dan HTML5, dan apabila saya membuka tapak pada iPhone saya, video itu dimainkan dalam pemain video Safari iOS asli. Walau bagaimanapun, apabila saya menukar orientasi untuk menonton video dalam mod landskap, video dimatikan. Adakah saya perlu melaksanakan beberapa konfigurasi teg video HTML5? Atau adakah ini masalah dengan pemaparan React saya? </p> <p>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. </p> <p>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? </p> <p>Edit dengan contoh: </p> <pre class="brush:php;toolbar:false;">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 /> ) } }</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 />
     )
  }