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!