AEMaaCS: Auf Mobilgeräten werden in Dynamic Media-Videos zwei Wiedergabeschaltflächen angezeigt
In Dynamic Media-Videos in Adobe Experience Manager (AEM) as a Cloud Service werden bei der Ansicht auf Mobilgeräten zwei sich überschneidende Wiedergabeschaltflächen angezeigt. Um dies zu beheben, aktualisieren Viewer-Vorgabe Einstellungen, überprüfen Sie Initialisierungsskripte und stellen Sie die Konsistenz über Umgebungen hinweg sicher.
Beschreibung description
Umgebung
- Produkt: Adobe Experience Manager (AEM) as a Cloud Service - Sites
- Funktion: Dynamic Media-Viewer-Vorgaben
- instance: production
- Plattform: auf physischen Mobilgeräten (z. B. iPhones) beobachtet
Problem/Symptome
- In Dynamic Media-Videos werden bei der Anzeige auf Mobilgeräten zwei überlappende Wiedergabeschaltflächen angezeigt.
- Dieses Problem tritt nicht in Desktop-Browsern, simulierten mobilen Umgebungen oder Staging-Umgebungen auf.
- Die doppelten Wiedergabeschaltflächen werden im DOM mit unterschiedlichen
topgerendert.
Auflösung resolution
Führen Sie die folgenden Schritte aus, um doppelte Wiedergabeschaltflächen in mobilen Umgebungen zu vermeiden:
-
Ändern Sie die Konfiguration der Viewer-Vorgabe, um benutzerdefinierte Überlagerungswiedergabeschaltflächen zu deaktivieren, sodass nur die native Wiedergabeschaltfläche des Browsers angezeigt wird.
- Gehen Sie zu Assets
>Viewer-Vorgaben in AEM. - Bearbeiten Sie die entsprechende Viewer-Vorgabe.
- Deaktivieren Sie alle Optionen im Zusammenhang mit benutzerdefinierten Überlagerungssteuerelementen für Mobilgeräte.
- Gehen Sie zu Assets
-
Überprüfen Sie, ob das Video-Player-Initialisierungsskript mehrmals ausgeführt wird, wodurch doppelte DOM-Elemente erstellt werden können.
- Verwenden Sie Browser-Entwickler-Tools, um Aufrufe an
s7viewers.VideoVieweroder ähnliche Funktionen zu überwachen. - Diagnoseprotokollierung hinzufügen, um zu verfolgen, wann und wie oft diese Skripte ausgelöst werden
- Verwenden Sie Browser-Entwickler-Tools, um Aufrufe an
-
Stellen Sie sicher, dass die mit der Viewer-Vorgabe verknüpften CSS- und JavaScript-Dateien in allen Umgebungen konsistent sind.
- Vergleichen geladener Assets mithilfe von Browser-Netzwerk-Tools.
- Stellen Sie sicher, dass keine zusätzlichen Skripte oder Stile
.s7iconeffectoder verwandte Klassen ändern.
-
Wenn das Problem nur bestimmte Benutzende betrifft, löschen Sie den Browser-Cache oder testen Sie ihn im Inkognito-/privaten Modus.
-
Veröffentlichen Sie sowohl die betroffenen Video-Assets als auch die aktualisierten Viewer-Vorgaben erneut, um zwischengespeicherte Versionen zu ersetzen.
-
Hinweis: Dies ist ein optionaler Schritt.
Sie können bedingte CSS-Regeln für Mobilgeräte anwenden, um benutzerdefinierte Überlagerungen zu unterdrücken. Verwenden Sie:
code language-none @media (max-width: 767px) { .s7playbutton { display: none !important; } } -
Validieren Sie Änderungen in einer niedrigeren Umgebung, bevor Sie sie in der Produktion bereitstellen.
- Testen Sie auf physischen Geräten anstelle von Simulatoren/Emulatoren.
- Aktualisieren Sie Seiten mehrmals, um ein konsistentes Verhalten zu bestätigen.