AEMaaCS: i dispositivi mobili mostrano due pulsanti di riproduzione nei video Dynamic Media

I video Dynamic Media in Adobe Experience Manager (AEM) as a Cloud Service mostrano due pulsanti di riproduzione sovrapposti quando vengono visualizzati su dispositivi mobili. Per risolvere il problema, aggiorna le impostazioni del predefinito visualizzatore, controlla gli script di inizializzazione e assicurati che siano coerenti tra gli ambienti.

Descrizione description

Ambiente

  • Prodotto: Adobe Experience Manager (AEM) as a Cloud Service - Sites
  • Funzionalità: Predefiniti visualizzatore Dynamic Media
  • Istanza: Produzione
  • Piattaforma: osservata su dispositivi mobili fisici (ad esempio, iPhone)

Problema/Sintomi

  • I video Dynamic Media visualizzano due pulsanti di riproduzione sovrapposti sui dispositivi mobili.
  • Questo problema non si verifica nei browser desktop, negli ambienti mobili simulati o negli ambienti di staging.
  • Il rendering dei pulsanti di riproduzione duplicati viene eseguito con valori di proprietà top diversi nel DOM.

Risoluzione resolution

Per eliminare i pulsanti di riproduzione duplicati negli ambienti mobili, effettua le seguenti operazioni:

  1. Modifica la configurazione del predefinito visualizzatore per disattivare i pulsanti di riproduzione sovrapposti personalizzati, in modo da visualizzare solo il pulsante di riproduzione nativo del browser.

    1. Vai a Predefiniti visualizzatore > di Assets in AEM.
    2. Modifica il predefinito visualizzatore pertinente.
    3. Disattiva le opzioni relative ai controlli di sovrapposizione personalizzati per i dispositivi mobili.
  2. Verifica se lo script di inizializzazione del lettore video viene eseguito più volte, il che può creare elementi DOM duplicati.

    1. Utilizzare gli strumenti di sviluppo del browser per monitorare le chiamate a s7viewers.VideoViewer o funzioni simili.
    2. Aggiungi la registrazione diagnostica per tenere traccia di quando e con quale frequenza vengono attivati questi script
  3. Assicurati che i file CSS e JavaScript associati al predefinito visualizzatore siano coerenti tra gli ambienti.

    1. Confronta le risorse caricate tramite gli strumenti di rete del browser.
    2. Verificare che gli script o gli stili aggiuntivi non modifichino .s7iconeffect o le classi correlate.
  4. Se il problema riguarda solo utenti specifici, cancella la cache del browser o esegui il test in modalità incognito/privata.

  5. Ripubblicare le risorse video interessate e i predefiniti visualizzatore aggiornati per sostituire le versioni memorizzate in cache.

  6. Nota: Questo passaggio è facoltativo.

    Puoi applicare regole CSS condizionali ai dispositivi mobili per eliminare le sovrapposizioni personalizzate. Usa:

    code language-none
    @media (max-width: 767px) {
                    .s7playbutton {
                        display: none !important;
                    }
                }
    
  7. Convalida le modifiche in un ambiente inferiore prima di distribuirle in produzione.

    1. Eseguire test su dispositivi fisici anziché su simulatori/emulatori.
    2. Aggiorna le pagine più volte per confermare la coerenza del comportamento.

Lettura correlata

Video in Dynamic Media nella Guida utente di AEMaaCS

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