AEMaaCS: Mobila enheter visar två uppspelningsknappar i Dynamic Media-videor
I Dynamic Media-videofilmer i Adobe Experience Manager (AEM) as a Cloud Service visas två överlappande uppspelningsknappar när de visas på mobila enheter. Du kan åtgärda detta genom att uppdatera inställningarna för visningsförinställningen, inspektera initieringsskript och se till att inställningarna är konsekventa i alla miljöer.
Beskrivning description
Miljö
- Produkt: Adobe Experience Manager (AEM) as a Cloud Service - Webbplatser
- Funktion: Förinställningar för Dynamic Media Viewer
- Instans: Produktion
- Plattform: Observeras på fysiska mobila enheter (till exempel iPhone)
Problem/symtom
- I videofilmer med dynamiska media visas två överlappande uppspelningsknappar när de visas på mobila enheter.
- Detta problem uppstår inte i webbläsare på datorer, i simulerade mobilmiljöer eller i miljöer med testmiljöer.
- De duplicerade uppspelningsknapparna återges med olika
top-egenskapsvärden i DOM.
Upplösning resolution
Följ de här stegen för att ta bort dubbla uppspelningsknappar i mobila miljöer:
-
Ändra konfigurationen för visningsförinställningen för att inaktivera anpassade överläggsspelningsknappar så att endast webbläsarens inbyggda uppspelningsknapp visas.
- Gå till Assets
>förinställningar för visningsprogram i AEM. - Redigera relevant visningsförinställning.
- Inaktivera alternativ som är relaterade till anpassade överläggskontroller för mobila enheter.
- Gå till Assets
-
Kontrollera om initieringsskriptet för videospelaren körs flera gånger, vilket kan skapa duplicerade DOM-element.
- Använd webbläsarutvecklarverktygen för att övervaka anrop till
s7viewers.VideoViewereller liknande funktioner. - Lägg till diagnostikloggning för att spåra när och hur ofta dessa skript aktiveras
- Använd webbläsarutvecklarverktygen för att övervaka anrop till
-
Kontrollera att CSS- och JavaScript-filer som är kopplade till visningsförinställningen är konsekventa i olika miljöer.
- Jämför inlästa resurser med webbläsarens nätverksverktyg.
- Kontrollera att inga extra skript eller format ändrar
.s7iconeffecteller relaterade klasser.
-
Om problemet endast berör vissa användare, rensa webbläsarens cache eller testa i inkognito/privat läge.
-
Publicera om både de videomaterial som påverkas och uppdaterade visningsförinställningar för att ersätta cachelagrade versioner.
-
Obs!: Detta är ett valfritt steg.
Du kan använda villkorsstyrda CSS-regler för mobila enheter för att inaktivera anpassade övertäckningar. Använd:
code language-none @media (max-width: 767px) { .s7playbutton { display: none !important; } } -
Validera ändringarna i en lägre miljö innan du distribuerar till produktionen.
- Testa på fysiska enheter i stället för simulatorer/emulatorer.
- Uppdatera sidor flera gånger för att bekräfta ett konsekvent beteende.