Safari iOS で HTML5 ビデオを再生すると、向きを変更するとビデオが閉じてしまう

Question

React と HTML5 の タグを使用してビデオをレンダリングしています。iPhone でサイトを開くと、ビデオはネイティブ iOS Safari ビデオ プレーヤーで再生されます。ただし、ビデオを横向きモードで見るために向きを変更すると、ビデオがオフになります。 HTML5 video タグの何らかの構成を実装する必要がありますか?それとも、これは私の React レンダリングに問題があるのでしょうか?

よりわかりやすくするために、アルゴリズム ビジュアライザーを開発していますが、現時点ではモバイル デバイスではサポートされていません。そこで、いくつかのメディア クエリを使用して、モバイル デバイスでページを開くときに大きな画面を使用するようにユーザーに指示するモーダルを表示します。モーダルには Web サイトのデモ ビデオが含まれているので、再生後に方向が変わったときにビデオを再度開かなくても、モバイル デバイスでビデオを正しく視聴できるようにしたいと考えています。

最大幅クエリのみを使用しているため、モバイルでランドスケープ モードに変更するとモーダルが消え、ビジュアライザがレンダリングを試みるというメディア クエリで問題が発生しています。そこで、代わりに max-height メディア クエリも実装しました。これが問題なのでしょうか?

例を使用して編集します:

const Video = ({ src }) => {
   戻る （
      <ビデオ コントロール幅 = "100%" プリロード = "自動"">
         <source src={src} type="video/mp4" />
         お使いのブラウザは HTML5 ビデオをサポートしていません。
      </ビデオ>
   )
}

const App = () => {
   // ChakraUI フックを使用したメディア クエリ
   const [wIsSmallerThan48em] = useMediaQuery("(最大幅: 48em)");
   const [hIsSmallerThan30em] = useMediaQuery("(最大高さ: 30em)");

  // ポートレート モードでもランドスケープ モードでも、モバイル デバイス上で「間違った」モーダルをレンダリングします
  if (wIsSmallerThan48em || hIsSmallerThan30em){
     戻る （
        <モーダル>
            <ビデオ src={MyVideo} />
        </モーダル>
     )
  } それ以外 {
     戻る （
      <ビジュアライザー />
     )
  }

}

Answer 1

この問題を解決するのに非常に多くの時間を費やした後、私は愚かな気分ですが、他の誰かが同じような問題を抱えている場合に備えて、回答を投稿したいと思いました。

この問題は React のレンダリング プロセスに関連しています。 <Modal/> は、メディア クエリが更新されるたびに再レンダリングされます。これは、モバイル デバイスで方向が変わるときに発生します。そのため、方向が変更されたときにモーダルが再レンダリングされると、ビデオが閉じます。なぜメディア クエリによって再レンダリングが発生するのかわかりません (おそらく ChakraUI フックの設定と関係があると思われます)。誰かがこの問題を抱えている場合は、詳しく説明できるかもしれません。ただし、ステータスに切り替えることで問題は解決しました。

解決策は簡単です:

リーリー