Ich rendere ein Video mit React und dem HTML5-Tag und wenn ich die Website auf meinem iPhone öffne, wird das Video im nativen iOS-Safari-Videoplayer abgespielt. Wenn ich jedoch die Ausrichtung ändere, um das Video im Querformat anzusehen, wird das Video ausgeschaltet. Muss ich eine Konfiguration des HTML5-Video-Tags implementieren? Oder ist das ein Problem mit meinem React-Rendering?
Zum besseren Verständnis entwickle ich einen Algorithmus-Visualizer, der derzeit auf Mobilgeräten nicht unterstützt wird. Deshalb verwende ich einige Medienabfragen, um ein Modal anzuzeigen, das den Benutzer anweist, einen größeren Bildschirm zu verwenden, wenn er die Seite auf einem mobilen Gerät öffnet. Im Modal habe ich ein Demovideo für die Website, sodass ich möchte, dass die Leute das Video auf Mobilgeräten korrekt ansehen können, ohne das Video erneut öffnen zu müssen, wenn sich die Ausrichtung nach dem Abspielen ändert.
Ich habe einige Probleme mit Medienabfragen, bei denen beim Wechsel in den Querformatmodus auf Mobilgeräten das Modal verschwindet und der Visualizer versucht, zu rendern, da ich nur eine Abfrage mit maximaler Breite verwende. Deshalb habe ich stattdessen auch die Medienabfrage mit maximaler Höhe implementiert. Könnte das das Problem sein?
Bearbeiten mit Beispiel:
const Video = ({ src }) => zurückkehren (
在花了这么多时间来解决这个问题后，我感觉自己很愚蠢，但是我想把答案发出来，以防其他人遇到类似的问题。
问题与React的渲染过程有关。每当媒体查询更新时，
解决方法很简单：
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]) // 在移动设备上无论是纵向还是横向都渲染“错误”模态框 if (showModal){ return ( ) } else { return (