Artigo original: https://www.freecodecamp.org/news/video-audio-in-html-a-short-guide-69f721878b47/
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 atributosrcusado 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 detypemudaria para video/ogg ou video/WebM, respectivamente.
Nota: alguns formatos de vídeo comuns são WebM, Ogg, MP4.
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.
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.
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.
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.
O vídeo ficará exatamente igual. Agora, no entanto, temos um suporte mais amplo dos navegadores.
Se quisermos adicionar atributos como controls, autoplay, loop etc., adicionaremos a tag <video>.
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.
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!