<p>React와 HTML5의 <code><video></code> 태그를 사용하여 비디오를 렌더링하고 있는데 iPhone에서 사이트를 열면 해당 비디오가 기본 iOS Safari 비디오 플레이어에서 재생됩니다. 그런데 영상을 가로 모드로 보기 위해 방향을 바꾸면 영상이 꺼집니다. HTML5 비디오 태그의 일부 구성을 구현해야 합니까? 아니면 내 React 렌더링에 문제가 있는 걸까요? </p> <p>더 나은 이해를 위해 현재 모바일 장치에서는 지원되지 않는 알고리즘 시각화 도구를 개발 중입니다. 그래서 저는 일부 미디어 쿼리를 사용하여 사용자에게 모바일 장치에서 페이지를 열 때 더 큰 화면을 사용하도록 지시하는 모달을 표시합니다. 모달에는 웹사이트의 데모 비디오가 있으므로 사람들이 재생 후 방향이 바뀔 때 비디오를 다시 열 필요 없이 모바일 장치에서 비디오를 올바르게 볼 수 있기를 바랍니다. </p> <p>최대 너비 쿼리만 사용하고 있기 때문에 모바일에서 가로 모드로 변경할 때 모달이 사라지고 시각화 도우미가 렌더링을 시도하는 미디어 쿼리에 몇 가지 문제가 있습니다. 그래서 대신 max-height 미디어 쿼리도 구현했습니다. 이것이 문제가 될 수 있습니까? </p> <p>예를 들어 수정하세요: </p> <pre class="brush:php;toolbar:false;">const 비디오 = ({ src }) => 반품 ( <동영상 컨트롤 너비="100%" preload="자동" <소스 src={src} 유형="동영상/mp4" 귀하의 브라우저는 HTML5 비디오를 지원하지 않습니다. </동영상> ) } const 앱 = () => // ChakraUI 후크를 사용한 미디어 쿼리 const [wIsSmallerThan48em] = useMediaQuery("(최대 너비: 48em)"); const [hIsSmallerThan30em] = useMediaQuery("(최대 높이: 30em)"); // 세로 또는 가로 모드에 관계없이 모바일 장치에서 "잘못된" 모달을 렌더링합니다. if (wIsSmallerThan48em || hIsSmallerThan30em){ 반품 ( <모달> <동영상 소스={MyVideo} /> </모달> ) } 또 다른 { 반품 ( <비주얼라이저 /> ) } }</pre></p>