Eine Änderung der Ausrichtung führt dazu, dass das Video geschlossen wird, wenn HTML5-Videos auf Safari iOS abgespielt werden

Question

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 (
      <Video steuert width="100%" preload="auto">
         <source src={src} type="video/mp4"
         Ihr Browser unterstützt kein HTML5-Video.
      </video>
   )
}

const App = () =>
   // Medienabfragen mit ChakraUI-Hooks
   const [wIsSmallerThan48em] = useMediaQuery("(max-width: 48em)");
   const [hIsSmallerThan30em] = useMediaQuery("(max-height: 30em)");

  // „Falsches“ modales Rendern sowohl im Hoch- als auch im Querformat auf Mobilgeräten
  if (wIsSmallerThan48em || hIsSmallerThan30em){
     zurückkehren (
        <Modal>
            <Video src={MyVideo} />
        </Modal>
     )
  } anders {
     zurückkehren (
      <Visualizer />
     )
  }

}

Answer 1

在花了这么多时间来解决这个问题后，我感觉自己很愚蠢，但是我想把答案发出来，以防其他人遇到类似的问题。

问题与React的渲染过程有关。每当媒体查询更新时，<Modal/>会重新渲染，这在移动设备上更改方向时会发生。因此，当模态框在方向更改时重新渲染时，视频会关闭。我不确定为什么媒体查询会导致重新渲染（可能与ChakraUI hooks的设置有关），如果有人遇到这个问题，也许可以详细说明一下。但是，切换到状态解决了问题。

解决方法很简单：

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 (
        <Modal>
            <Video src={MyVideo} />
        </Modal>
     )
  } else {
     return (
      <Visualizer />
     )
  }