Artigo original: How to embed video and audio in your HTML

Escrito por: Abhishek Jakhar

O HTML nos permite criar reprodutores de vídeo e áudio baseados em padrões que não requerem o uso de plug-ins. Adicionar vídeo e áudio a um site é quase sempre tão fácil quanto adicionar imagens ou formatar algum texto.

Existem duas formas diferentes de incluir elementos de vídeo. Discutiremos as duas abaixo.

Vídeo

A tag <video> nos permite inserir arquivos de vídeo no HTML, bem similar ao modo como imagens são inseridas.

Os atributos que podemos inserir são:

  • src: este atributo representa a fonte, que é muito semelhante ao atributo src usado no elemento de imagem. Adicionaremos o link para um arquivo de vídeo nesse atributo.
  • type: este será video/mp4, pois .mp4 é o formato de vídeo que estamos usando. Também podemos usar diferente formatos de vídeo, como .ogg ou .webm. Nesse caso, o valor de type mudaria para video/ogg ou video/WebM, respectivamente.
Nota: alguns formatos de vídeo comuns são WebM, Ogg, MP4.
1_4epxHpB0Z94ZaNq64bL9WA
<video> na página

Agora, temos esse vídeo na nossa página, mas tem um problema. Esse vídeo não está sendo reproduzido automaticamente e também não há controles para iniciar o vídeo. Temos que adicioná-los manualmente usando o atributo controls na nossa tag de vídeo.

Esse atributo não possui nenhum valor, porque é um atributo booleano. Isso significa que ele só pode ser true ou false.

Ter o atributo controls na nossa tag de vídeo significa que o valor dele será true e exibirá os controles de reprodução.

1_FKJojPyvDky1kM3gK5Z7KA
<video> com o atributo Controls

Se removermos o atributo controls, também podemos fazer o vídeo ser reproduzido automaticamente usando o atributo autoplay. Esse também é um atributo booleano.

1_TOOc_dxlcW6q7Cr3AUbxJQ
tag <video> com o atributo autoplay (mas sem o atributo controls)

Como você pode ver, o vídeo está iniciando sozinho e não há controle. É verdade que não precisamos pressionar play para iniciar o vídeo, mas também não podemos pará-lo.

Também podemos ter controles e reprodução automática juntos.

1_jB3XGWVtrr8qOl21gCOAmQ-1
tag <video> com reprodução automática e atributo controls

Você pode fornecer atributos diferentes para o elemento de vídeo, dependendo do requisito.

Eu mencionei acima que existem duas formas diferentes de adicionar a tag vídeo. Vamos testar a outra forma.

Tag source

Anteriormente, usamos um elemento de vídeo com tag de fechamento automático, mas, aqui, fecharemos a tag de vídeo. Agora, temos uma tag de abertura e de fechamento.

Nos também removeremos os atributos type e source da tag video e os colocaremos em outra tag.

<video>  <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4" type="video/mp4"></video>

Tudo o que fizemos foi mover os atributos para o elemento source

Por que faríamos isso?

Bem, na maioria dos casos, com o vídeo, teremos várias fontes, já que precisamos fornecer diferentes tipos de arquivo, dependendo de qual navegador está visualizando seu vídeo, pois diferentes navegadores oferecem suporte a diferentes tipos de arquivo.

1_pHYI6GbxxHUL5A_FDTdK1A

O vídeo ficará exatamente igual. Agora, no entanto, temos um suporte mais amplo dos navegadores.

1_P4pGSwzIVaFxWtT6tenhsA
Vídeo com suporte amplo de navegadores (sem atributos)

Se quisermos adicionar atributos como controls, autoplay, loop etc., adicionaremos a tag <video>.

1_Ff1qRhcSQfqvHgcjbSrcsg
Vídeo com suporte mais amplo a navegadores e outros atributos

Elemento de áudio

A tag <audio> é bastante similar à tag video. Entretanto, a única principal diferença é que não há recursos visuais.

Podemos usar o elemento de áudio para iniciar um arquivo de vídeo na nossa página da web — como se fosse um arquivo mp3.

Agora, assim como a tag de vídeo, existem duas formas diferentes de se fazer isso.

  • Usar uma tag única representando o elemento inteiro.
  • Abrir e fechar tags com um elemento filho no meio.

Temos aqui uma tag de abertura e de fechamento. Então, adicionaremos o elemento source no meio.

A estrutura de pastas ficará assim:

|-- project    |-- audio      |-- sample.mp3      |-- sample.ogg    |-- css      |-- main.css      |-- normalize.css    index.html

O atributo controls não existe na tag <audio> no exemplo acima. O elemento <audio> não aparecerá no documento HTML.

Você pode ver que existem apenas algumas diferenças importantes aqui. O valor no atributo type mudou de "video/mp4" para “audio/mp3”. No atributo src, nós mudamos de um arquivo de vídeo com a extensão .mp4 para um arquivo de áudio com a extensão .mp3.

Assim como o elemento de vídeo, não poderemos realmente parar ou iniciar o áudio sem controles. Portanto, adicionaremos o atributo controls ao elemento de áudio.

1__d_AaBpz1QWH8csBB_-m8w
Elemento de aúdio (<audio></audio>) com várias fontes para suporte mais amplo aos navegadores

Você também pode adicionar outros atributos à tag <audio> como autoplay, loop, etc.

Cobrimos aqui o essencial sobre os elementos video e audio no HTML.

Você pode ler mais sobre vídeo e áudio nos links abaixo:

Espero que você tenha achado este artigo informativo e útil. Obrigado pela leitura!