Rotation du téléphone et HLS : diagnostiquer un redémarrage du lecteur

Si une vidéo HLS se met en pause, saute ou recommence à charger lorsque vous tournez votre téléphone, la rotation ne suffit pas à identifier la cause. La mise en page adaptative a peut-être simplement changé de dimensions ; l'application a pu remplacer l'élément <video> ; le passage en plein écran a pu déclencher un changement d'état distinct ; ou la page a réellement rechargé la source.

Commencez par déterminer ce qui s'est produit. Comparez les modes portrait et paysage avec le même flux autorisé, la même version du lecteur et du navigateur, la même position de lecture et le même réseau. Ne concluez pas à un défaut du navigateur mobile après une seule rotation et ne restaurez pas aveuglément un ancien horodatage pendant une diffusion en direct.

Méthode de vérification — 28 septembre 2026 : Nous avons consulté la documentation MDN actuelle sur la Screen Orientation API, les requêtes média d'orientation de la fenêtre, HTMLMediaElement.currentTime, play() et le plein écran. Nous avons également exécuté un banc d'essai Node.js déterministe couvrant des cas synthétiques de redimensionnement, de remontage et de restauration d'état. Il s'agit uniquement d'une vérification documentaire et de la logique du banc d'essai : aucun téléphone physique, moteur HLS propre à un navigateur ni flux réel n'a été testé. Banc d'essai : scripts/test-hls-orientation-fixture.cjs.

Distinguer un changement de mise en page d'un redémarrage du lecteur

Ces signaux correspondent à des couches différentes :

La fonctionnalité média CSS orientation décrit la forme de la fenêtre ; elle ne prouve pas qu'un événement de capteur physique a provoqué le redémarrage de la lecture. Lorsque JavaScript a réellement besoin d'une notification d'orientation, préférez l'événement change de la Screen Orientation API à l'événement obsolète orientationchange, lorsqu'il est disponible. En général, il suffit de redimensionner le conteneur : recréer l'élément vidéo n'est pas nécessaire.

Instrumenter le lecteur avant de modifier le code

Pour un test autorisé et court, consignez une séquence horodatée :

1. screen.orientation.type et la largeur/hauteur de la fenêtre, si ces informations sont disponibles.
2. Un identifiant stable de l'instance du lecteur et le remplacement éventuel du nœud réel <video>.
3. currentSrc ou un identifiant de source expurgé, currentTime, paused, readyState et networkState.
4. Les événements resize, visibilitychange, fullscreenchange, pause, playing, waiting, emptied, loadstart et loadedmetadata.
5. Le démarrage éventuel d'une nouvelle requête de manifeste ou de média. Ne conservez qu'une catégorie d'hôte/chemin expurgée ; ne journalisez jamais les paramètres signés, les cookies ou les en-têtes d'autorisation.

Prenez un instantané juste avant la rotation, puis un autre une fois la mise en page stabilisée. Si le nœud vidéo et la source restent identiques et qu'aucune nouvelle séquence de chargement ne démarre, examinez d'abord la mise en page ou la mise en mémoire tampon. Si le nœud a changé, repérez la branche de rendu qui l'a remplacé. Si la source a été réaffectée, suivez le chemin de code correspondant.

Tester séparément la rotation, le plein écran et le rechargement

Utilisez une petite matrice de tests au lieu de multiplier les rotations au hasard :

Ne présentez pas un émulateur ou la fenêtre redimensionnée d'un navigateur de bureau comme un test sur appareil physique. Si le problème est limité à une combinaison téléphone/navigateur à laquelle vous n'avez pas accès, indiquez que le comportement a été vérifié uniquement dans la documentation ou n'a pas été testé, puis demandez la version du navigateur, celle du système, la catégorie d'appareil et une trace d'événements expurgée.

Préserver l'élément média dans la mesure du possible

Laissez CSS redimensionner l'enveloppe du lecteur tout en conservant le même élément média et la même instance HLS. Évitez d'utiliser une valeur dépendant de l'orientation comme clé de composant ou de placer le lecteur dans une branche conditionnelle qui le démonte. Évitez également de recréer le lecteur à chaque événement resize, sauf contrainte documentée du moteur.

Si le démontage est inévitable, ne conservez que l'état récupérable sans risque : identité de la source, état de pause, préférences de piste audio/qualité si elles sont prises en charge et dernier temps média observé. Rattachez la source, attendez les métadonnées et les plages de recherche disponibles, puis validez la cible avant de lancer la recherche. currentTime est une position de recherche, pas une identité durable du contenu en direct : la fenêtre DVR peut se déplacer ou expirer pendant la recréation du lecteur. Limitez la cible à une plage actuellement disponible ou revenez au direct selon le comportement attendu du produit.

N'appelez play() que si l'état précédent et le comportement du produit justifient la reprise. Sa Promise peut être rejetée : gérez ce cas et laissez une commande de lecture utilisable. Le passage en plein écran est lui aussi asynchrone et peut échouer ; mettez l'interface à jour à partir de l'événement réel de plein écran au lieu de supposer que la demande a réussi.

Erreurs fréquentes

• Recréer le lecteur à chaque resize : la rotation et les barres du navigateur peuvent générer des changements de mise en page sans nécessiter le rechargement de la source.
• Utiliser une clé de composant qui change : une clé liée à la largeur ou à l'orientation peut remplacer volontairement tout le sous-arbre vidéo.
• N'écouter que l'ancien événement d'orientation : utilisez la Screen Orientation API moderne lorsqu'elle est disponible et prévoyez une solution de repli adaptée si l'information d'orientation est nécessaire.
• Rechercher systématiquement un ancien horodatage en direct : la fenêtre actuelle peut ne plus contenir cette position.
• Appeler play() sans gérer sa Promise : une exigence de geste utilisateur ou une politique du navigateur peut empêcher la reprise automatique.
• Supposer que le plein écran a provoqué la rotation : testez séparément l'entrée/sortie du plein écran et le changement d'orientation.
• Partager les journaux de requêtes complets : les paramètres d'URL et les en-têtes peuvent contenir des identifiants ; expurgez-les avant le partage.

Un rapport d'incident concis

Indiquez l'appareil et le système, le navigateur et sa version, le lecteur/moteur et sa version, le type de flux (VOD ou direct/DVR), l'état de lecture initial et la séquence exacte du test. Précisez si le nœud vidéo ou l'instance du lecteur a changé, si une requête de manifeste a redémarré et si currentTime, paused ou les plages de recherche ont évolué. Expurgez les URL de flux, clés, jetons, cookies et noms d'hôte privés. Indiquez clairement si le comportement a seulement été vérifié dans la documentation et non reproduit sur l'appareil cité.

Pour poursuivre le diagnostic, consultez le guide HLS pour mobile, le dépannage de la lecture HLS après le passage en arrière-plan ou le verrouillage de l'écran et les conseils sur l'autoplay bloqué.

Références principales

• MDN : événement change de ScreenOrientation
• MDN : gérer l'orientation de l'écran
• MDN : HTMLMediaElement.currentTime
• MDN : HTMLMediaElement.play()
• MDN : Element.requestFullscreen()
• MDN : événement orientationchange obsolète

La distinction essentielle n'est pas « portrait ou paysage », mais « la mise en page a changé ou le cycle de vie du lecteur/de la source a changé ». Commencez par établir cette distinction avant de décider s'il faut restaurer l'état de lecture.