Autoplay em páginas de vendas

Os navegadores, por padrão, não permitem o autoplay dos vídeos em que o vídeo com som (não mudo). 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?

Alguns recursos só 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: 09/05/2022