AEMaaCS: 모바일 장치에는 Dynamic Media 비디오에 두 개의 재생 버튼이 표시됩니다
Adobe Experience Manager(AEM) as a Cloud Service의 Dynamic Media 비디오에는 모바일 디바이스에서 볼 때 두 개의 겹치는 재생 버튼이 표시됩니다. 이 문제를 해결하려면 뷰어 사전 설정 설정을 업데이트하고 초기화 스크립트를 검사하며 환경 간에 일관성을 확인하십시오.
설명 description
환경
- 제품: Adobe Experience Manager(AEM) as a Cloud Service - 사이트
- 기능: Dynamic Media 뷰어 사전 설정
- 인스턴스: 프로덕션
- 실제 모바일 장치(예: iPhone)에서 플랫폼: 관찰
문제/증상
- Dynamic Media 비디오는 모바일 디바이스에서 볼 때 두 개의 겹치는 재생 버튼을 표시합니다.
- 이 문제는 데스크탑 브라우저, 시뮬레이션된 모바일 환경 또는 스테이징 환경에서는 발생하지 않습니다.
- 중복 재생 단추가 DOM에서 다른
top속성 값으로 렌더링됩니다.
해결 방법 resolution
모바일 환경에서 중복 재생 버튼을 제거하려면 다음 단계를 따르십시오.
-
브라우저의 기본 재생 버튼만 나타나도록 뷰어 사전 설정 구성을 수정하여 사용자 지정 오버레이 재생 버튼을 비활성화합니다.
- AEM의 Assets
>뷰어 사전 설정(으)로 이동합니다. - 관련 뷰어 사전 설정을 편집합니다.
- 모바일 장치의 사용자 지정 오버레이 컨트롤과 관련된 옵션을 비활성화합니다.
- AEM의 Assets
-
비디오 플레이어 초기화 스크립트가 여러 번 실행되어 중복 DOM 요소가 생성될 수 있는지 확인합니다.
- 브라우저 개발자 도구를 사용하여
s7viewers.VideoViewer또는 유사한 함수에 대한 호출을 모니터링합니다. - 이러한 스크립트가 트리거되는 시기와 빈도를 추적하기 위해 진단 로깅을 추가합니다
- 브라우저 개발자 도구를 사용하여
-
뷰어 사전 설정에 연결된 CSS 및 JavaScript 파일이 여러 환경에서 일관되는지 확인하십시오.
- 브라우저 네트워크 도구를 사용하여 로드된 자산을 비교합니다.
.s7iconeffect또는 관련 클래스를 수정하는 추가 스크립트나 스타일이 없는지 확인하십시오.
-
문제가 특정 사용자에게만 영향을 주는 경우 브라우저 캐시를 지우거나 시크릿/비공개 모드로 테스트하십시오.
-
영향을 받는 비디오 자산과 업데이트된 뷰어 사전 설정을 모두 다시 게시하여 캐시된 버전을 바꿉니다.
-
참고: 선택적 단계입니다.
모바일 장치에 대해 조건부 CSS 규칙을 적용하여 사용자 지정 오버레이를 표시하지 않을 수 있습니다. 사용:
code language-none @media (max-width: 767px) { .s7playbutton { display: none !important; } } -
프로덕션에 배포하기 전에 낮은 환경에서 변경 내용을 확인합니다.
- 시뮬레이터/에뮬레이터 대신 실제 장치에서 테스트합니다.
- 페이지를 여러 번 새로 고쳐 일관된 동작을 확인합니다.
3d58f420-19b5-47a0-a122-5c9dab55ec7f