AEMaaCS: dispositivos móveis mostram dois botões de reprodução em vídeos do Dynamic Media

Os vídeos do Dynamic Media no Adobe Experience Manager (AEM) as a Cloud Service mostram dois botões de reprodução sobrepostos quando visualizados em dispositivos móveis. Para corrigir isso, atualize as configurações da Predefinição do visualizador, inspecione os scripts de inicialização e garanta a consistência entre os ambientes.

Descrição description

Ambiente

  • Produto: Adobe Experience Manager (AEM) as a Cloud Service - Sites
  • Recurso: Predefinições do Visualizador do Dynamic Media
  • Instância: Produção
  • Plataforma: observada em dispositivos móveis físicos (por exemplo, iPhones)

Problema/Sintomas

  • Os vídeos do Dynamic Media exibem dois botões de reprodução sobrepostos quando visualizados em dispositivos móveis.
  • Esse problema não ocorre em navegadores de desktop, ambientes móveis simulados ou ambientes de preparo.
  • Os botões de reprodução duplicados são renderizados com diferentes valores de propriedade top no DOM.

Resolução resolution

Siga estas etapas para eliminar botões de reprodução duplicados em ambientes móveis:

  1. Modifique a configuração da Predefinição do visualizador para desativar os botões de reprodução de sobreposição personalizados para que somente o botão de reprodução nativo do navegador seja exibido.

    1. Vá para Assets > Predefinições do Visualizador no AEM.
    2. Edite a Predefinição do visualizador relevante.
    3. Desative todas as opções relacionadas a controles de sobreposição personalizados para dispositivos móveis.
  2. Verifique se o script de inicialização do reprodutor de vídeo é executado várias vezes, o que pode criar elementos DOM duplicados.

    1. Use as ferramentas de desenvolvedor do navegador para monitorar chamadas para s7viewers.VideoViewer ou funções semelhantes.
    2. Adicione logs de diagnóstico para rastrear quando e com que frequência esses scripts são acionados
  3. Verifique se os arquivos CSS e JavaScript vinculados à Predefinição do visualizador são consistentes em todos os ambientes.

    1. Comparar ativos carregados usando ferramentas de rede do navegador.
    2. Verifique se nenhum script ou estilo extra modifica .s7iconeffect ou classes relacionadas.
  4. Se o problema afetar apenas usuários específicos, limpe o cache do navegador ou teste no modo incógnito/privado.

  5. Republicar os ativos de vídeo afetados e as Predefinições do visualizador atualizadas para substituir as versões em cache.

  6. Observação: esta é uma etapa opcional.

    É possível aplicar regras CSS condicionais para dispositivos móveis a fim de suprimir sobreposições personalizadas. Uso:

    code language-none
    @media (max-width: 767px) {
                    .s7playbutton {
                        display: none !important;
                    }
                }
    
  7. Valide as alterações em um ambiente inferior antes de implantar na produção.

    1. Teste em dispositivos físicos em vez de simuladores/emuladores.
    2. Atualize as páginas várias vezes para confirmar um comportamento consistente.

Leitura relacionada

Vídeo no Dynamic Media no Guia do Usuário do AEMaaCS

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