Documentation

AEMaaCS : les appareils mobiles affichent deux boutons de lecture dans les vidéos Dynamic Media

Last update: Wed Oct 22 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Les vidéos Dynamic Media dans Adobe Experience Manager (AEM) as a Cloud Service présentent deux boutons de lecture qui se chevauchent lorsqu’elles sont affichées sur des appareils mobiles. Pour corriger ce problème, mettez à jour les paramètres Paramètre prédéfini de la visionneuse, inspectez les scripts d’initialisation et assurez la cohérence entre les environnements.

Description description

Environnement

  • Produit : Adobe Experience Manager (AEM) as a Cloud Service - Sites
  • Fonctionnalité : paramètres prédéfinis de la visionneuse Dynamic Media
  • Instance: Production
  • Plateforme : observé sur les appareils mobiles physiques (par exemple, les iPhone)

Problème/Symptômes

  • Les vidéos Dynamic Media affichent deux boutons de lecture qui se chevauchent lorsqu’elles sont affichées sur des appareils mobiles.
  • Ce problème ne se produit pas dans les navigateurs de bureau, les environnements mobiles simulés ou les environnements d’évaluation.
  • Les boutons de lecture en double sont rendus avec différentes valeurs de propriété top dans le DOM.

Résolution resolution

Pour éliminer les boutons de lecture en double dans les environnements mobiles, procédez comme suit :

  1. Modifiez la configuration des paramètres prédéfinis de visionneuse pour désactiver les boutons de lecture de recouvrement personnalisés afin que seul le bouton de lecture natif du navigateur apparaisse.

    1. Accédez à Assets > Paramètres prédéfinis de visionneuse dans AEM.
    2. Modifiez le paramètre prédéfini de visionneuse approprié.
    3. Désactivez toutes les options liées aux contrôles de recouvrement personnalisés pour les appareils mobiles.

  2. Vérifiez si le script d’initialisation du lecteur vidéo s’exécute plusieurs fois, ce qui peut créer des éléments DOM en double.

    1. Utilisez les outils de développement du navigateur pour surveiller les appels à s7viewers.VideoViewer ou à des fonctions similaires.
    2. Ajoutez une journalisation des diagnostics pour suivre le moment et la fréquence de déclenchement de ces scripts

  3. Assurez-vous que les fichiers CSS et JavaScript liés au paramètre prédéfini de visionneuse sont cohérents entre les environnements.

    1. Comparez les ressources chargées à l’aide des outils réseau du navigateur.
    2. Vérifiez qu’aucun script ou style supplémentaire ne modifie les .s7iconeffect ou les classes associées.

  4. Si le problème ne concerne que des utilisateurs spécifiques, effacez la mémoire cache du navigateur ou testez-le en mode privé/en privé.

  5. Republiez les ressources vidéo affectées et les paramètres prédéfinis de visionneuse mis à jour pour remplacer les versions mises en cache.

  6. Remarque : Il s’agit d’une étape facultative.

    Vous pouvez appliquer des règles CSS conditionnelles pour les appareils mobiles afin de supprimer les recouvrements personnalisés. Utilisation :

    code language-none 
    @media (max-width: 767px) {
                .s7playbutton {
                    display: none !important;
                }
            }

  7. Validez les modifications dans un environnement inférieur avant le déploiement en production.

    1. Testez sur des appareils physiques au lieu de simulateurs/émulateurs.
    2. Actualisez les pages plusieurs fois pour confirmer un comportement cohérent.

Lecture connexe

Guide de l’utilisateur Vidéo dans Dynamic Media dans AEMaaCS

recommendation-more-help
3d58f420-19b5-47a0-a122-5c9dab55ec7f