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. 🙂