Como incorporar áudio e vídeo em HTML?

HTML significa HyperText Markup Language. Ele é usado para projetar páginas da web usando uma linguagem de marcação. É uma combinação de hipertexto e linguagem de marcação. O HTML usa tags e elementos predefinidos que informam ao navegador como exibir corretamente o conteúdo na tela. Portanto, neste artigo, aprenderemos a incorporar áudio e vídeo em HTML. Para inserir arquivos multimídia em páginas web, já sabemos como inserir imagens em HTML.

Como inserir áudio em HTML?

Para embutir áudio em HTML, usamos a tag <audio>. Antes do HTML5, o áudio não podia ser adicionado a páginas da web na era do Internet Explorer. Para reproduzir áudio, usamos plug-ins da web como o Flash. Após o lançamento do HTML5, isso é possível. Esta tag suporta Chrome, Firefox, Safari, Opera e Edge em três formatos de áudio - MP3, WAV, OGG. Apenas o navegador Safari não suporta o formato de áudio OGG.

Sintaxe:

<audio>
    <source src="file_name" type="audio_file_type">
</audio>

Atributos da tag <audio>

Atributo	Valor	Descrição
Reprodução automática	Reprodução automática	Quando a página é carregada. Ele especifica para reproduzir o áudio o mais rápido possível.
controles	controles	Ele exibe o controle de áudio.
ciclo	ciclo	Ele iniciará o áudio novamente quando terminar.
mudo	mudo	Quando a página é carregada, o áudio é silenciado automaticamente.
pré-carga	metadados automáticos Nenhum	Ele especifica como o autor pensa que o áudio será carregado quando a página estiver pronta.
src	URL	Ele especifica a URL do arquivo de áudio.

Exemplo:

Neste exemplo, adicionaremos um arquivo de áudio a uma página da web. Para adicionar arquivos de áudio na página web, precisamos de um bloco de notas ou outro editor de texto.

Etapa 1: Abra seu bloco de notas pesquisando bloco de notas em sua lista de aplicativos.

Etapa 2: Salve um novo arquivo com um nome válido seguido de extensão .html.

Etapa 3: Uma vez que o arquivo HTML é salvo, você pode escrever o código HTML dentro deste arquivo. Neste exemplo, temos que incorporar um arquivo de áudio, portanto, primeiro mantenha um arquivo de áudio pronto e salve no mesmo diretório onde seu HTML foi salvo. Em seguida, escrevemos o código HTML conforme mostrado abaixo do trecho de código seguido pelo formato do código HTML.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Click play button to play audio</h2>
<audio src="./test.mp3" controls></audio>
</body>
</html>

Saída:

Nota: Antes de adicionar uma fonte de áudio, certifique-se de que o arquivo de áudio está no mesmo diretório e nome especificado.

Como inserir vídeo em HTML?

Para incorporar vídeo em HTML, usamos a tag <video>. Ele contém uma ou mais fontes de vídeo por vez usando a tag <source>. Ele suporta MP4, WebM e Ogg em todos os navegadores modernos. Apenas o formato de vídeo Ogg não é compatível com o navegador Safari.

Sintaxe

<video>
    <source src="file_name" type="video_file_type">
</video>

Atributos da tag <video>

Atributo	Valor	Descrição
Reprodução automática	Reprodução automática	Quando a página é carregada. Ele especifica para reproduzir o vídeo o mais rápido possível.
controles	controles	Ele exibe o controle de vídeo, como reproduzir, pausar e parar.
ciclo	ciclo	O vídeo será reiniciado quando terminar.
mudo	mudo	Quando a página for carregada, o vídeo será silenciado automaticamente.
poster	URL	Ele especifica que uma imagem será exibida até a reprodução do vídeo.
pré-carga	metadados automáticos nenhum	Ele especifica como o autor acha que o vídeo será carregado quando a página estiver pronta.
src	URL	Ele especifica a URL do arquivo de áudio.
largura	píxeis	Ele especifica a largura da área de vídeo. O valor padrão da largura é 'auto'.
altura	píxeis	Ele especifica a altura da área de vídeo. O valor padrão da largura é 'auto'.

Exemplo:

Neste exemplo, adicionaremos um vídeo à nossa página da web. Para adicionar vídeo, usaremos a tag <video> definindo a fonte usando a tag <source>. Crie um arquivo HTML como um exemplo de arquivo de áudio e salve o arquivo de vídeo no mesmo diretório. Suponha que um arquivo de vídeo chamado test.mp4 seja salvo no mesmo diretório onde o arquivo HTML foi salvo.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Click play button to play video</h2>
<video src="./test.mp4" controls></video>
</body>
</html>

ou você pode usar o seguinte código:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Click play button to play video</h2>
<video controls>
    <source  src="./test.mp4">
</video>
</body>
</html>

Saída: