Incorporação de Áudio e Vídeo

Incorporação de áudio

Para incluir arquivos de áudio em uma página web, podemos utilizar o elemento <audio>. Vamos considerar um exemplo:

Neste exemplo, temos:

• O elemento <audio> contém um elemento <source>, que especifica o URL e o tipo de arquivo do áudio. Os formatos comumente suportados são MP3 e OGG;
• O atributo controls mostra controles padrão de reprodução, como tocar, pausar e volume;
• Se o navegador do usuário não suportar o elemento de áudio, uma mensagem será exibida.

Atributos adicionais comumente usados com o elemento de áudio HTML incluem:

• autoplay - começa a reproduzir o arquivo de áudio assim que a página é carregada;
• loop - faz com que o arquivo de áudio seja repetido continuamente;
• muted - silencia o áudio por padrão;
• volume - especifica o nível de volume padrão para o arquivo de áudio, variando de 0.0 (silencioso) a 1.0 (volume máximo).

Aqui está um exemplo demonstrando o uso de todos esses atributos:

Incorporação de vídeo

Podemos usar o elemento <video> para incorporar arquivos de vídeo em uma página web. Considere o seguinte exemplo:

Neste exemplo:

• O elemento <video> contém um elemento <source>, o qual especifica o URL e o tipo de arquivo do vídeo. Os formatos comuns suportados são WebM, MP4 e OGG;
• O atributo controls exibe controles padrão de reprodução;
• Se o navegador do usuário não suportar o elemento de vídeo, uma mensagem será exibida.

Os atributos comumente utilizados para o elemento de vídeo HTML incluem:

• autoplay - inicia a reprodução do arquivo de vídeo assim que a página é carregada;
• loop - faz com que o arquivo de vídeo seja repetido continuamente;
• muted - silencia o áudio por padrão;
• volume - especifica o nível de volume padrão para o arquivo de áudio, variando de 0.0 (silencioso) a 1.0 (volume máximo);
• poster - especifica o URL de uma imagem a ser exibida como miniatura do vídeo antes que o vídeo seja reproduzido;
• width e height - especificam a largura e altura do reprodutor de vídeo em pixels.

Aqui está um exemplo que demonstra o uso de todos esses atributos:

Nota

Além disso, existem muitas bibliotecas e APIs de JavaScript disponíveis que oferecem funcionalidades adicionais para reproduzir e manipular conteúdo de vídeo na web.