Artigo original: HTML5 Video: How to Embed Video in Your HTML
Antes do HTML5, para poder executar um vídeo em uma página da web, era necessário usar um plug-in como o Adobe Flash Player. Com a introdução do HTML5, foi possível começar a colocar vídeos diretamente na própria página.
Isso torna possível fazer com que os vídeos sejam executados em páginas criadas para dispositivos móveis, pois plug-ins como o Adobe Flash Player não funcionam no Android ou no iOS.
O elemento <video>
do HTML é usado para incorporar vídeos a documentos da web. Pode conter uma ou mais fontes de vídeo, representadas usando o atributo src
ou o elemento source.
Para incorporar um arquivo de vídeo, basta adicionar este trecho de código e alterar o atributo src
, colocando nele o caminho do arquivo de vídeo:
<video controls>
<source src="tutorial.ogg" type="video /ogg">
<source src="tutorial.mp4" type="video /mpeg">
Seu navegador não oferece suporte ao elemento de vídeo. Atualize-o para a versão mais recente.
</video >
O elemento <video>
tem suporte em todos os navegadores modernos. Porém, nem todos os navegadores dão suporte aos mesmos formatos de arquivo de vídeo. Arquivos MP4 são o formato de vídeo mais amplamente aceito. Outros formatos, como WebM e Ogg, já têm suporte no Chrome, no Firefox e no Opera.
Para garantir que seu vídeo seja executado na maioria dos navegadores, uma boa prática é codificá-lo nos formatos Ogg e MP4, incluindo os dois no elemento <video>
, como no exemplo acima. Os navegadores usarão o primeiro formato reconhecido.
Se, por alguma razão, o navegador não reconhecer um dos formatos, o texto "Seu navegador não oferece suporte ao elemento de vídeo. Atualize-o para a versão mais recente." será exibido no lugar do vídeo.
Você também deve ter notado a palavra controls
na tag <video>
. Esse elemento inclui vários atributos úteis para personalizar a experiência de reprodução de arquivos.
Atributos de <video>
controls
O atributo controls
trata de exibir ou não controles como o botão de reproduzir/pausar ou o botão deslizante de ajuste de volume.
Ele é um atributo booleano, o que significa que ele pode ser definido como true
ou false
. Para defini-lo como true
, basta adicioná-lo à tag <video>
. Se não estiver presente na tag, ele estará definido como false
e os controles não serão exibidos.
autoplay
A reprodução automática (em inglês, autoplay) pode ser definida como true
ou false
. É mais um atributo booleano. Você a define como true
adicionando-a à tag. Se não estiver presente na tag, ela estará definida como false
. Caso esteja definida como true
, o vídeo começara a ser executado assim que uma quantidade de vídeo suficiente estive no buffer para que seja possível executá-lo. Muita gente acha a reprodução automática incômoda e que ela atrapalha a experiência. Use este recurso pouco e com bastante critério. Observe, também, que alguns navegadores para dispositivos móveis, como o Safari para o iOS, ignoram esse atributo.
<video autoplay>
<source src="video.mp4" type="video/mp4">
</video>
poster
O atributo poster
refere-se à imagem que será exibida no vídeo até que o usuário clique nele para executar o vídeo.
<video poster="poster.png">
<source src="video.mp4" type="video/mp4">
</video>
Vídeos podem ser custosos
Embora esteja mais fácil do que nunca incluir vídeos em sua página, geralmente, é melhor fazer o upload dos vídeos para um serviço como o YouTube, o Vimeo ou o Wistia e incorporá-lo ao seu código. Isso ocorre porque servir vídeos pode ser caro – para você em termos de custos de servidor e para os espectadores, caso tenham planos de dados limitados.
Fazer a hospedagem de seus próprios arquivos de vídeo também pode causar problemas com a largura de banda, o que pode levar a travamentos repentinos e ao carregamento lento dos vídeos. Além disso, os navegadores tendem a variar em termos da qualidade de reprodução dos vídeos. Sendo assim, é difícil controlar exatamente o que os seus espectadores acabarão assistindo. Também é muito fácil fazer o download de vídeos incorporados com a tag <video>
. Se a pirataria é algo que preocupa você, seria melhor procurar por outras opções.
Dito isso, fique à vontade para incorporar vídeos ao HTML com conteúdo que toque o seu coração – ou não. A decisão é sua. 🙂