国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

更改方向在Safari iOS上播放HTML5視頻時(shí)會(huì)導(dǎo)致視頻關(guān)閉
P粉413307845
P粉413307845 2023-08-30 20:49:37
0
1
881
<p>我正在使用React和HTML5的<code><video></code>標(biāo)簽渲染視頻,當(dāng)我在iPhone上打開(kāi)網(wǎng)站時(shí),視頻會(huì)在本機(jī)iOS Safari視頻播放器中播放。然而,當(dāng)我改變方向以在橫向模式下觀看視頻時(shí),視頻會(huì)關(guān)閉。我需要實(shí)現(xiàn)HTML5視頻標(biāo)簽的某些配置嗎?還是這是我React渲染的問(wèn)題?</p> <p>為了更好地理解,我正在開(kāi)發(fā)一個(gè)算法可視化器,暫時(shí)不支持移動(dòng)設(shè)備。因此,我使用一些媒體查詢來(lái)顯示一個(gè)模態(tài)框,告訴用戶在移動(dòng)設(shè)備上打開(kāi)頁(yè)面時(shí)要使用更大的屏幕。在模態(tài)框中,我有一個(gè)網(wǎng)站的演示視頻,所以我希望人們能夠在移動(dòng)設(shè)備上正確觀看視頻,而不必在播放后更改方向時(shí)重新打開(kāi)視頻。</p> <p>我在媒體查詢方面遇到了一些問(wèn)題,即在移動(dòng)設(shè)備上更改為橫向模式時(shí),模態(tài)框會(huì)消失,并且會(huì)嘗試渲染可視化器,因?yàn)槲抑皇褂昧薽ax-width查詢。所以,我改為同時(shí)實(shí)現(xiàn)max-height媒體查詢。這可能是問(wèn)題嗎?</p> <p>帶有示例的編輯:</p> <pre class="brush:php;toolbar:false;">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)"); // 在移動(dòng)設(shè)備上無(wú)論是縱向還是橫向模式都呈現(xiàn)“錯(cuò)誤”模態(tài)框 if (wIsSmallerThan48em || hIsSmallerThan30em){ return ( <Modal> <Video src={MyVideo} /> </Modal> ) } else { return ( <Visualizer /> ) } }</pre></p>
P粉413307845
P粉413307845

全部回復(fù)(1)
P粉287726308

在花了這么多時(shí)間來(lái)解決這個(gè)問(wèn)題后,我感覺(jué)自己很愚蠢,但是我想把答案發(fā)出來(lái),以防其他人遇到類似的問(wèn)題。

問(wèn)題與React的渲染過(guò)程有關(guān)。每當(dāng)媒體查詢更新時(shí),<Modal/>會(huì)重新渲染,這在移動(dòng)設(shè)備上更改方向時(shí)會(huì)發(fā)生。因此,當(dāng)模態(tài)框在方向更改時(shí)重新渲染時(shí),視頻會(huì)關(guān)閉。我不確定為什么媒體查詢會(huì)導(dǎo)致重新渲染(可能與ChakraUI hooks的設(shè)置有關(guān)),如果有人遇到這個(gè)問(wèn)題,也許可以詳細(xì)說(shuō)明一下。但是,切換到狀態(tài)解決了問(wèn)題。

解決方法很簡(jiǎn)單:

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])

  // 在移動(dòng)設(shè)備上無(wú)論是縱向還是橫向都渲染“錯(cuò)誤”模態(tài)框
  if (showModal){
     return (
        <Modal>
            <Video src={MyVideo} />
        </Modal>
     )
  } else {
     return (
      <Visualizer />
     )
  }
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板