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:

  1. Ändra konfigurationen för visningsförinställningen för att inaktivera anpassade överläggsspelningsknappar så att endast webbläsarens inbyggda uppspelningsknapp visas.

    1. Gå till Assets > förinställningar för visningsprogram i AEM.
    2. Redigera relevant visningsförinställning.
    3. Inaktivera alternativ som är relaterade till anpassade överläggskontroller för mobila enheter.
  2. Kontrollera om initieringsskriptet för videospelaren körs flera gånger, vilket kan skapa duplicerade DOM-element.

    1. Använd webbläsarutvecklarverktygen för att övervaka anrop till s7viewers.VideoViewer eller liknande funktioner.
    2. Lägg till diagnostikloggning för att spåra när och hur ofta dessa skript aktiveras
  3. Kontrollera att CSS- och JavaScript-filer som är kopplade till visningsförinställningen är konsekventa i olika miljöer.

    1. Jämför inlästa resurser med webbläsarens nätverksverktyg.
    2. Kontrollera att inga extra skript eller format ändrar .s7iconeffect eller relaterade klasser.
  4. Om problemet endast berör vissa användare, rensa webbläsarens cache eller testa i inkognito/privat läge.

  5. Publicera om både de videomaterial som påverkas och uppdaterade visningsförinställningar för att ersätta cachelagrade versioner.

  6. 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;
                    }
                }
    
  7. Validera ändringarna i en lägre miljö innan du distribuerar till produktionen.

    1. Testa på fysiska enheter i stället för simulatorer/emulatorer.
    2. Uppdatera sidor flera gånger för att bekräfta ett konsekvent beteende.

Relaterad läsning

Video i dynamiska media i användarhandboken för AEMaaCS

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