<p>React と HTML5 の <code><video></code> タグを使用してビデオをレンダリングしています。iPhone でサイトを開くと、ビデオはネイティブ iOS Safari ビデオ プレーヤーで再生されます。ただし、ビデオを横向きモードで見るために向きを変更すると、ビデオがオフになります。 HTML5 video タグの何らかの構成を実装する必要がありますか?それとも、これは私の React レンダリングに問題があるのでしょうか? </p> <p>よりわかりやすくするために、アルゴリズム ビジュアライザーを開発していますが、現時点ではモバイル デバイスではサポートされていません。そこで、いくつかのメディア クエリを使用して、モバイル デバイスでページを開くときに大きな画面を使用するようにユーザーに指示するモーダルを表示します。モーダルには Web サイトのデモ ビデオが含まれているので、再生後に方向が変わったときにビデオを再度開かなくても、モバイル デバイスでビデオを正しく視聴できるようにしたいと考えています。 </p> <p>最大幅クエリのみを使用しているため、モバイルでランドスケープ モードに変更するとモーダルが消え、ビジュアライザがレンダリングを試みるというメディア クエリで問題が発生しています。そこで、代わりに max-height メディア クエリも実装しました。これが問題なのでしょうか? </p> <p>例を使用して編集します: </p> <pre class="brush:php;toolbar:false;">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} /> </モーダル> ) } それ以外 { 戻る （ <ビジュアライザー /> ) } }</pre></p>