방향을 변경하면 Safari iOS에서 HTML5 비디오를 재생할 때 비디오가 닫힙니다.

Question

React와 HTML5의 태그를 사용하여 비디오를 렌더링하고 있는데 iPhone에서 사이트를 열면 해당 비디오가 기본 iOS Safari 비디오 플레이어에서 재생됩니다. 그런데 영상을 가로 모드로 보기 위해 방향을 바꾸면 영상이 꺼집니다. HTML5 비디오 태그의 일부 구성을 구현해야 합니까? 아니면 내 React 렌더링에 문제가 있는 걸까요?

더 나은 이해를 위해 현재 모바일 장치에서는 지원되지 않는 알고리즘 시각화 도구를 개발 중입니다. 그래서 저는 일부 미디어 쿼리를 사용하여 사용자에게 모바일 장치에서 페이지를 열 때 더 큰 화면을 사용하도록 지시하는 모달을 표시합니다. 모달에는 웹사이트의 데모 비디오가 있으므로 사람들이 재생 후 방향이 바뀔 때 비디오를 다시 열 필요 없이 모바일 장치에서 비디오를 올바르게 볼 수 있기를 바랍니다.

최대 너비 쿼리만 사용하고 있기 때문에 모바일에서 가로 모드로 변경할 때 모달이 사라지고 시각화 도우미가 렌더링을 시도하는 미디어 쿼리에 몇 가지 문제가 있습니다. 그래서 대신 max-height 미디어 쿼리도 구현했습니다. 이것이 문제가 될 수 있습니까?

예를 들어 수정하세요:

const 비디오 = ({ src }) =>
   반품 (
      <동영상 컨트롤 너비="100%" preload="자동"
         <소스 src={src} 유형="동영상/mp4"
         귀하의 브라우저는 HTML5 비디오를 지원하지 않습니다.
      </동영상>
   )
}

const 앱 = () =>
   // ChakraUI 후크를 사용한 미디어 쿼리
   const [wIsSmallerThan48em] = useMediaQuery("(최대 너비: 48em)");
   const [hIsSmallerThan30em] = useMediaQuery("(최대 높이: 30em)");

  // 세로 또는 가로 모드에 관계없이 모바일 장치에서 "잘못된" 모달을 렌더링합니다.
  if (wIsSmallerThan48em || hIsSmallerThan30em){
     반품 (
        <모달>
            <동영상 소스={MyVideo} />
        </모달>
     )
  } 또 다른 {
     반품 (
      <비주얼라이저 />
     )
  }

}

Answer 1

이 문제를 해결하는 데 너무 많은 시간을 소비한 후 바보 같은 느낌이 들지만, 비슷한 문제가 있는 사람이 있을 경우를 대비해 답변을 게시하고 싶었습니다.

문제는 React의 렌더링 프로세스와 관련이 있습니다. <Modal/>는 미디어 쿼리가 업데이트될 때마다 다시 렌더링되며, 이는 모바일 장치에서 방향이 변경될 때 발생합니다. 따라서 방향 변경 시 모달이 다시 렌더링되면 비디오가 닫힙니다. 미디어 쿼리가 왜 다시 렌더링을 일으키는지 잘 모르겠습니다(아마도 ChakraUI 후크 설정과 관련이 있을 수 있음). 누군가 이 문제를 겪고 있다면 자세히 설명할 수 있습니다. 그러나 상태로 전환하면 문제가 해결되었습니다.

해결책은 간단합니다:

으아악