Autoplay em páginas de vendas

Os navegadores, por padrão, não permitem o autoplay dos vídeos com som, esta é uma política para melhorar a experiência do usuário, veja mais no blog do Chrome. Dessa forma em uma página de vendas, o que queremos é que o visitante seja engajado o mais rápido possível no conteúdo, principalmente em vídeo. O vídeo só pode ser exibido com autoplay com som se o usuário interagir com a página, ou seja, um clique é suficiente para o navegador permitir que o vídeo seja executado com audio.

Precisamos lembrar o usuário de clicar no vídeo para que o autoplay funcione. Assim, podemos iniciar um vídeo com o mudo e com um aviso grande pedir para o usuário clicar no vídeo. Este recurso aumenta sua conversão nas páginas de venda pois cria um engajamento maior do usuário.

Como implementar diretamente pelo Dashboard?

SmartAutplay
Atualmente já possuímos diversos recursos que você implementa dentro da sua dashboard, através deste link, você consegue ativar de forma prática o SmartAutoplay, e realizar configurações adicionais como ativar o indicador de mudo e personalizar conforme deseja.

Continuar de onde Parou
Através deste artigo é possível salvar o progresso do video no navegador , com essa funcionalidade, você permite que usuário escolha se ele deseja reiniciar o vídeo, ou retomar de onde parou.

Como implementar através de Parâmetros?

Alguns recursos estão disponíveis modificando código embed. Quando você copia um código embed do dashboard da Panda, observe que parte do código está dentro do src. Este é o bloco que controla o player e o seu comportamento. Para ativar o mutedIndicator (indicador de mudo) precisamos adicionar alguns parâmetros no código embed (em breve isto estará na plataforma de maneira mais simples).



Alguns parâmetros devem ser adicionados:

autoplay = true
muted = true
mutedIndicatorIcon = true
mutedIndicatorClickRestart = true
mutedIndicatorTextTop = Texto de cima
mutedIndicatorTextBottom = Texto de baixo
saveProgress = false
controls = play-large

Com os parâmetros acima, o vídeo iniciará com autoplay, em mudo e com o indicador de mudo (mutedIndicator). Ao clicar no ícone, o vídeo recomeça (sem recarregar, por conta do parâmetro mutedIndicatorClickRestart) e sem salvar o progresso do vídeo (saveProgress). Os controles também foram retirados, deixando apenas o play-large (controle de play) para não distrair o usuário.

Sendo assim, o código final fica:

<div style="position:relative;padding-top:56.25%;"><iframe id="panda-player" src="https://player-vz-ded14ebd-85a.tv.pandavideo.com.br/embed/?v=3b101f05-84aa-4de0-9b64-71f1855388af&muted=true&autoplay=true&mutedIndicatorIcon=true&mutedIndicatorTextTop=Texto de cima&mutedIndicatorTextBottom=Texto de baixo&saveProgress=false&mutedIndicatorClickRestart=true&controls=play-large" style="border:none;position:absolute;top:0;height:100%;width:100%" allow="accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture" allowfullscreen=true></iframe></div>

Observe que no final, foi adicionada a parte &muted=true&autoplay=true&mutedIndicatorIcon=true&mutedIndicatorTextTop=Texto de cima&mutedIndicatorTextBottom=Texto de baixo&saveProgress=false&mutedIndicatorClickRestart=true&controls=play-large. Obviamente, você pode alterar o texto que fica em cima e embaixo como quiser.

É importante dizer que no controls você pode colocar qualquer dos valores separados por vírgula para habilitar os controles do player como play-large,play,progress,current-time,volume,captions,settings,pip,fullscreen.

Qualquer dúvida, é só falar com a gente

Atualizado em: 18/09/2024