Le changement d'orientation entraîne la fermeture de la vidéo lors de la lecture d'une vidéo HTML5 sur Safari iOS

Question

Je rends une vidéo à l'aide de la balise de React et HTML5, et lorsque j'ouvre le site sur mon iPhone, la vidéo est lue dans le lecteur vidéo natif iOS Safari. Cependant, lorsque je change l'orientation pour regarder la vidéo en mode paysage, la vidéo s'éteint. Dois-je implémenter une configuration de la balise vidéo HTML5 ? Ou est-ce un problème avec mon rendu React ?

Pour une meilleure compréhension, je développe un visualiseur d'algorithmes, qui n'est pas pris en charge sur les appareils mobiles pour le moment. J'utilise donc certaines requêtes multimédias pour afficher un modal qui indique à l'utilisateur d'utiliser un écran plus grand lors de l'ouverture de la page sur un appareil mobile. Dans le modal, j'ai une vidéo de démonstration du site Web, je veux donc que les gens puissent regarder la vidéo correctement sur les appareils mobiles sans avoir à rouvrir la vidéo lorsque l'orientation change après la lecture.

Je rencontre des problèmes avec les requêtes multimédias. Lors du passage en mode paysage sur mobile, le modal disparaît et le visualiseur tente d'effectuer le rendu, car j'utilise uniquement une requête de largeur maximale. J’ai donc également implémenté la requête multimédia de hauteur maximale. Est-ce que ceci pourrait être le problème?

Modifier avec exemple :

const Vidéo = ({ src }) =>
   retour (
      <largeur des commandes vidéo="100%" préchargement="auto">
         <source src={src} type="video/mp4" />
         Votre navigateur ne prend pas en charge la vidéo HTML5.
      </vidéo>
   )
}

const App = () =>
   // Requêtes multimédias utilisant les hooks ChakraUI
   const [wIsSmallerThan48em] = useMediaQuery("(largeur maximale : 48em)");
   const [hIsSmallerThan30em] = useMediaQuery("(hauteur maximale : 30em)");

  // Rendu modal "mauvais" en mode portrait et paysage sur les appareils mobiles
  si (wIsSmallerThan48em || hIsSmallerThan30em){
     retour (
        <Modal>
            <Vidéo src={MaVidéo} />
        </Modal>
     )
  } autre {
     retour (
      <Visualiseur />
     )
  }

}

Answer 1

Je me sens stupide après avoir passé autant de temps à résoudre ce problème, mais je voulais publier la réponse au cas où quelqu'un d'autre aurait un problème similaire.

Le problème est lié au processus de rendu de React. <Modal/> est restitué à chaque fois que la requête multimédia est mise à jour, ce qui se produit lorsque l'orientation change sur les appareils mobiles. Ainsi, lorsque le modal est restitué lors du changement d'orientation, la vidéo se ferme. Je ne sais pas pourquoi la requête multimédia provoque un nouveau rendu (peut-être quelque chose à voir avec les paramètres des hooks ChakraUI), si quelqu'un a ce problème, il peut peut-être être développé. Cependant, le passage au statut a résolu le problème.

La solution est simple :

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 />
     )
  }