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à
topdiversi nel DOM.
Risoluzione resolution
Per eliminare i pulsanti di riproduzione duplicati negli ambienti mobili, effettua le seguenti operazioni:
-
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.
- Vai a Predefiniti visualizzatore
>di Assets in AEM. - Modifica il predefinito visualizzatore pertinente.
- Disattiva le opzioni relative ai controlli di sovrapposizione personalizzati per i dispositivi mobili.
- Vai a Predefiniti visualizzatore
-
Verifica se lo script di inizializzazione del lettore video viene eseguito più volte, il che può creare elementi DOM duplicati.
- Utilizzare gli strumenti di sviluppo del browser per monitorare le chiamate a
s7viewers.VideoViewero funzioni simili. - Aggiungi la registrazione diagnostica per tenere traccia di quando e con quale frequenza vengono attivati questi script
- Utilizzare gli strumenti di sviluppo del browser per monitorare le chiamate a
-
Assicurati che i file CSS e JavaScript associati al predefinito visualizzatore siano coerenti tra gli ambienti.
- Confronta le risorse caricate tramite gli strumenti di rete del browser.
- Verificare che gli script o gli stili aggiuntivi non modifichino
.s7iconeffecto le classi correlate.
-
Se il problema riguarda solo utenti specifici, cancella la cache del browser o esegui il test in modalità incognito/privata.
-
Ripubblicare le risorse video interessate e i predefiniti visualizzatore aggiornati per sostituire le versioni memorizzate in cache.
-
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; } } -
Convalida le modifiche in un ambiente inferiore prima di distribuirle in produzione.
- Eseguire test su dispositivi fisici anziché su simulatori/emulatori.
- Aggiorna le pagine più volte per confermare la coerenza del comportamento.