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 (   Votre navigateur ne prend pas en charge la vidéo HTML5.  ) } 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 (    ) } autre { retour (  ) } }