Deblogger

Áudio e vídeo no HTML

Nos artigos anteriores eu falei de tags de texto, link e imagens. Hoje, vou falar sobre as tags que podem ser utilizadas para incluir áudio e vídeo na sua página HTML. Isso porque essa linguagem nos permite criar players de áudio e vídeo baseados em padrões que não exigem o uso de plugins. Sendo assim, adicionar vídeo e áudio na sua página é quase tão fácil quanto adicionar uma imagem ou formatar algum texto.


Áudio

A tag <audio> permite adicionar um áudio na página. Assim como quando inserimos uma imagem no HTML, o atributo source aponta para o arquivo de áudio que será executado, sendo que as três extensões de arquivo suportadas pela maioria dos navegadores são: .mp3, .ogg e .wav. Em contrapartida, não existe um atributo para colocar um texto a ser exibido quando o navegador não conseguir carregar o áudio ou quando não houver suporte para esse elemento. Ainda assim, você pode colocar um texto entre a abertura e fechamento da tag para esse fim:

<audio controls src="nomedamusica.mp3">
    O seu navegador não tem suporte à áudio.
</audio> 

O atributo controls indica que devem ser exibidos os controles de gerenciamento do áudio (botões play, pause etc.). Entretanto, se você não colocar essa propriedade, normalmente o navegador não mostrará nada, isso porque, por padrão, os navegadores escondem os elementos sem esse atributo.

Existem diversos atributos que podem ser usados na tag <audio>, e listar todos aqui seria bastante difícil. Por isso, se você quiser conhecer todos, consulte a lista completa de atributos disponibilizada no site da w3school. Entretanto, existem atributos que eu acho importante falar aqui. São eles: o loop, que fará com que o áudio reproduza infinitamente até que o usuário dê o pause nele; o muted, que indica que o áudio ficará sem som (o usuário pode mudar isso clicando nos botões de controle); e o autoplay, que faz com que o áudio toque automaticamente quando carregado. É claro que não é interessante usar esse último com frequência, porque convenhamos que pode ser um pouco chato um áudio começar a tocar do nada quando você entra em um site.

Usando mais de um áudio

Outra forma de se inserir elementos de áudio é especificando mais de um arquivo (opções alternativas de formato, por exemplo). Nesse caso, é utilizada a tag <source> dentro da tag <audio>, da seguinte forma:

<audio controls>
    <source src="nomedamusica.mp3" type="audio/mpeg">
    <source src="nomedamusica.wav" type="audio/wav">
    O seu navegador não tem suporte à áudio.
</audio>

Utilizando a tag <source> os arquivos serão buscados na ordem em que aparecem na lista. Assim, caso o arquivo .mp3 não seja encontrado ou não possa ser carregado, o navegador automaticamente buscará o próximo. Isso é importante porque cada navegador tem seu suporte específico a determinadas extensões de arquivo. A tabela a seguir mostra quais extensões são suportadas por cada navegador:

NavegadorMP3WAVOGG
Edge/IE
Chrome
Firefox
Safari
Opera
Tipos de arquivos de áudio suportados pelos navegadores

Contudo, ao utilizar a tag <source>, é importante saber qual media type que colocar no atributo type:

Formato de ÁudioTipo de Mídia
MP3audio/mpeg
OGGaudio/ogg
WAVaudio/wav
Media types para cada formato de áudio

Vídeo

A tag <video> permite adicionar um vídeo na página. Assim como vimos na tag no elemento de áudio, o atributo source corresponde ao endereço do arquivo que será executado, e o atributo controls indica que devem ser exibidos os controles de gerenciamento (botões play, pause etc.). Entretanto, diferente do áudio, cada vídeo terá um tamanho diferente na tela, isso porque a altura e largura varia bastante. Sendo assim, para resolver esse problema e manter o vídeo adequado ao layout, além dos atributos já vistos no áudio, podemos informar a altura e a largura que queremos. Para isso usamos o atributo width para definir a largura, e o atributo height para definir a altura do vídeo.

Sendo assim, a sintaxe de utilização é bem parecida:

<video src="video.mp4" width="640" height="480" controls>
    O seu navegador não tem suporte a vídeo.
</video>

Assim como no elemento de áudio, o texto colocado entre a abertura e fechamento da tag só será exibido se o seu navegador não tiver suporte à reprodução de vídeo.

Da mesma forma que vimos no elemento de áudio, podemos colocar mais de um arquivo para abrir as possibilidades de compatibilidade com o navegador e garantir que o vídeo seja reproduzido. Sendo assim, também podemos utilizar a tag <source>:

<video width="640" height="480" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    O seu navegador não tem suporte a vídeo.
</video>

Nesse sentido, segue a tabela de navegadores e tipos de vídeo suportados:

NavegadorMP4WEBMOGG
Internet Explorer
Chrome
Firefox
Safari
Opera
Tipos de arquivos de vídeo suportados pelos navegadores

Por fim, ao utilizar a tag <source> para vídeos, use os seguintes media types no atributo type:

Formato de VídeoTipo de Mídia
MP4video/mp4
WEBMvideo/webm
OGGvideo/ogg

Conclusão

Em síntese, esse é o básico sobre como inserir áudio e vídeo em HTML. Entretanto, muitas coisas ainda poderão ser manipuladas com JavaScript, e existem outras formas de incluir mídia em uma página HTML, algo que eu tentarei explicarei futuramente. Sendo assim, a inserção de áudio e vídeo em HTML5 é uma área ampla, que vai muito além do que foi falado aqui!



Avalie:
0 (0)

Publicado por Mauro Oliveira

Desenvolvedor apaixonado por JavaScript, especialista em VueJS. Atualmente focado em padrões de projeto e código, estudando sobre testes unitários, Clean Code e segurança em aplicações Web, Mobile e Desktop.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *