O vídeo HTML5 no meu tema WordPress não reproduz automaticamente. Por quê?

O YouTube e o Vimeo são serviços muito usados para guardar vídeos, mas como fazer se for importante reproduzir o vídeo a partir de nossa hospedagem?

Não é de hoje que os vídeos têm se tornado um meio muito importante para comunicar-se com seu público e cada vez mais eles estão aparecendo nos sítios WordPress. O YouTube e o Vimeo são serviços muito usados para guardar estas mídias, mas em alguns casos, é importante hospedar e reproduzir o vídeo a partir de nossa hospedagem. Neste caso, como fazer?

Em HTML5, a marcação é muito simples, como vemos abaixo:

<video width="100%" height="auto" preload="auto" autoplay="autoplay" autoplay loop>
    <source src="meu-video.mp4" type=video/mp4>
</video>

Os parâmetros “autoplay” e “loop” servem para iniciar a reprodução e repeti-la automaticamente ao final do vídeo. O parâmetro “preload” faz a pré-carga do vídeo e garante que ele esteja disponível e possa ser reproduzido o mais rápido possível e que tenha menos chance de bloquear a primeira renderização da página, levando a melhorias no desempenho.

Até aí, tudo muito fácil. Com o tempo, entretanto, muitos portais e websites começaram a sobrecarregar os usuários com irritantes vídeos que pipocavam de todos os cantos e começavam a tocar sozinhos em alto som, logo que se entrava nas páginas. A leitura de conteúdos começou a ficar pobre e confusa, e isso gerou um movimento da Google e Mozilla para a mudança nas regras de reprodução de vídeo em páginas HTML5.

A mais importante delas é que os vídeos não poderiam mais tocar automaticamente, pelo menos, se tiverem som. Com isso, outras marcações se tornaram importantes para controlar cada vez mais a reprodução de vídeos.

Tudo isso para dizer que hoje é necessário adicionar o parâmetro “muted” (ou seja, “mudo”) para que o vídeo reproduza automaticamente sem a necessidade da intervenção do usuário (ou seja, que ele toque no botão “Play”, principalmente nos celulares).

Por fim, no Safari, ainda há necessidade de adicionar o parâmetro “playsinline” para que o vídeo seja tocado automaticamente no iPhone e no iPad.

O código completo fica assim, então:

<video width="100%" height="auto" preload="auto" autoplay="autoplay" autoplay loop muted playsinline>
    <source src="meu-video.mp4" type=video/mp4>
</video>

Vídeos em temas WordPress

Para incluir um vídeo no seu tema WordPress, basta adicionar este trecho no código do modelo da página do tema WordPress que estamos montando e substituir o parâmetro “src” pelo arquivo que se quer reproduzir.

Se for um vídeo fixo, podemos armazenar o vídeo junto ao próprio tema e usar get_template_directory_uri() para pegar o URL correto da pasta onde estará guardado o arquivo.

Se for um vídeo varíavel, precisamos adicionar uma opção no tema e resgatá-la com a função get_theme_mod().

Conclusão

Adicionar vídeos em temas WordPress é algo simples, só precisamos ter atenção em adicionar os parâmetros “muted” e “playsinline” para fazê-lo tocar automaticamente em nosso modelo de página.

Ficaste com alguma dúvida? Queres fazer uma observação? Deixa teu comentário aí embaixo para a gente conversar!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *