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

모바일 환경에서 중복 재생 버튼을 제거하려면 다음 단계를 따르십시오.

  1. 브라우저의 기본 재생 버튼만 나타나도록 뷰어 사전 설정 구성을 수정하여 사용자 지정 오버레이 재생 버튼을 비활성화합니다.

    1. AEM의 Assets > 뷰어 사전 설정(으)로 이동합니다.
    2. 관련 뷰어 사전 설정을 편집합니다.
    3. 모바일 장치의 사용자 지정 오버레이 컨트롤과 관련된 옵션을 비활성화합니다.
  2. 비디오 플레이어 초기화 스크립트가 여러 번 실행되어 중복 DOM 요소가 생성될 수 있는지 확인합니다.

    1. 브라우저 개발자 도구를 사용하여 s7viewers.VideoViewer 또는 유사한 함수에 대한 호출을 모니터링합니다.
    2. 이러한 스크립트가 트리거되는 시기와 빈도를 추적하기 위해 진단 로깅을 추가합니다
  3. 뷰어 사전 설정에 연결된 CSS 및 JavaScript 파일이 여러 환경에서 일관되는지 확인하십시오.

    1. 브라우저 네트워크 도구를 사용하여 로드된 자산을 비교합니다.
    2. .s7iconeffect 또는 관련 클래스를 수정하는 추가 스크립트나 스타일이 없는지 확인하십시오.
  4. 문제가 특정 사용자에게만 영향을 주는 경우 브라우저 캐시를 지우거나 시크릿/비공개 모드로 테스트하십시오.

  5. 영향을 받는 비디오 자산과 업데이트된 뷰어 사전 설정을 모두 다시 게시하여 캐시된 버전을 바꿉니다.

  6. 참고: 선택적 단계입니다.

    모바일 장치에 대해 조건부 CSS 규칙을 적용하여 사용자 지정 오버레이를 표시하지 않을 수 있습니다. 사용:

    code language-none
    @media (max-width: 767px) {
                    .s7playbutton {
                        display: none !important;
                    }
                }
    
  7. 프로덕션에 배포하기 전에 낮은 환경에서 변경 내용을 확인합니다.

    1. 시뮬레이터/에뮬레이터 대신 실제 장치에서 테스트합니다.
    2. 페이지를 여러 번 새로 고쳐 일관된 동작을 확인합니다.

관련 읽기

AEMaaCS 사용 안내서의 Dynamic Media의 비디오

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