Passo 1 de 7
Escolher o elemento e indicar o arquivo
Escolha entre audio e video e associe um arquivo ao elemento usando src.
Trilha de aprendizado · Nível 4 · Tutorial 5
Inserir arquivos de áudio e vídeo com controles do navegador, fontes alternativas e acesso direto aos arquivos, sem depender de JavaScript.
Escolher o elemento e indicar o arquivo
Escolha entre audio e video e associe um arquivo ao elemento usando src. 2 min
Ativar os controles e deixar o usuário iniciar
Use controls para oferecer reprodução e pausa e omita autoplay para deixar o usuário decidir quando começar. 3 min
Entender por que um formato pode não tocar
Diferencie formato, contêiner e codec e entenda por que a extensão de um arquivo não garante sua reprodução. 3 min
Declarar fontes alternativas com source
Organize versões do mesmo áudio ou vídeo com source, indicando o arquivo, o tipo MIME e a ordem de preferência. 3 min
Definir dimensões e imagem de apresentação
Configure o tamanho de exibição do vídeo sem alterar sua proporção e use poster para apresentar uma imagem antes da reprodução. 3 min
Oferecer acesso ao arquivo fora do reprodutor
Diferencie o conteúdo de reserva de um link sempre visível e ofereça acesso direto ao arquivo de mídia. 3 min
Aplicar e conferir a incorporação completa
Complete uma página com arquivos reais de áudio e vídeo e confira a reprodução, a apresentação e os links no navegador. 4 min
Passo 1 de 7
Escolha entre audio e video e associe um arquivo ao elemento usando src.
Use o elemento audio para incorporar conteúdo sonoro, como uma entrevista ou uma música.
Use o elemento video para incorporar imagens em movimento, com ou sem som. Uma demonstração filmada sem áudio continua sendo um vídeo.
Esses elementos permitem incorporar arquivos de mídia diretamente na página com HTML, sem depender de JavaScript ou de um serviço externo de reprodução.
Uma página terá uma entrevista apenas em áudio e uma demonstração filmada sem som. Quais elementos usar, nessa ordem?
Para indicar uma única fonte, coloque o caminho do arquivo no atributo src, na tag de abertura de audio ou video. Nos exemplos, cada elemento aponta para um arquivo da pasta midias.
<audio src="midias/entrevista.mp3"></audio>
<video src="midias/demonstracao.mp4"></video>Dica
Diferentemente de img, esses elementos precisam de tags de fechamento: </audio> e </video>. Mantenha-as mesmo quando não houver conteúdo entre as tags.
Complete com o atributo que associa o arquivo de áudio ao elemento.
<audio ____="midias/entrevista.mp3"></audio>
O vídeo está em midias/demonstracao.mp4. Complete apenas o valor de src, sem repetir as aspas.
<video src="____"></video>
Passo 2 de 7
Use controls para oferecer reprodução e pausa e omita autoplay para deixar o usuário decidir quando começar.
Em audio e video, controls solicita os controles nativos do navegador para ações como reproduzir, pausar e avançar na mídia. A aparência e os recursos disponíveis variam entre navegadores e dispositivos.
É um atributo booleano: sua presença ativa a opção; sua ausência não a solicita. Escrever controls="false" não desativa os controles.
<audio src="apresentacao.mp3" controls></audio>Inicie este áudio, pause e depois continue. Observe os controles disponíveis neste reprodutor.
Este é um áudio de prática. Você decide quando ouvir. Experimente pausar a reprodução agora. Quando quiser continuar, use novamente o botão de reproduzir.
<video src="demonstracao.mp4" controls="false"></video>Nesse trecho, o valor "false" faz o navegador deixar de oferecer os controles nativos.
controls oferece a interface de reprodução; ele não solicita que a mídia comece sozinha.
Já autoplay solicita reprodução automática, mas o navegador pode bloqueá-la conforme suas políticas. Não dependa desse bloqueio: omita autoplay para preservar a iniciativa do usuário e evitar som inesperado, distração e reprodução indesejada.
Atenção
autoplay também é booleano. Mesmo com o texto "false", sua presença continua solicitando início automático. Para deixar de solicitá-lo, remova o atributo por inteiro.
<video src="demonstracao.mp4" controls="false" autoplay="false"></video>Qual alteração oferece controles nativos sem solicitar reprodução automática?
Passo 3 de 7
Diferencie formato, contêiner e codec e entenda por que a extensão de um arquivo não garante sua reprodução.
Dica
Uma extensão como .mp4 indica o contêiner esperado, mas não informa sozinha todos os codecs usados. A compatibilidade depende do suporte do navegador ou dispositivo à combinação de contêiner e codecs.
Associe cada termo à sua descrição.
Toque em um item e depois no par correspondente.
Essas são opções comuns, não garantias de suporte em todos os navegadores e dispositivos.
Exemplo
Uma entrevista pode ter uma versão MP3 e outra em Ogg. São arquivos diferentes com a mesma entrevista, preparados de fato nesses formatos. Oferecer essas versões pode ampliar a compatibilidade.
Atenção
Trocar o nome entrevista.mp3 por entrevista.ogg não altera os dados do arquivo. Para criar uma alternativa, é preciso obter ou gerar uma versão realmente convertida para o outro formato.
Uma página tem dois vídeos .mp4. No mesmo navegador, um toca e o outro não. Qual análise faz sentido?
Passo 4 de 7
Organize versões do mesmo áudio ou vídeo com source, indicando o arquivo, o tipo MIME e a ordem de preferência.
Para oferecer versões da mesma mídia, coloque um elemento source por arquivo dentro de audio ou video. Em cada source, src indica o caminho do arquivo e type indica seu tipo MIME. Os controles continuam no elemento pai.
<audio controls>
<source src="audio/entrevista.mp3" type="audio/mpeg">
<source src="audio/entrevista.ogg" type="audio/ogg">
</audio>Use uma fonte única com src no próprio audio ou video, ou fontes alternativas com source. Ao usar alternativas, retire o src do elemento pai: ele tem prioridade e faria a lista de source ser ignorada.
Dica
Diferentemente do uso em picture, aqui cada source usa src, não srcset.
Este source será colocado dentro de um audio com controles. Falta indicar o tipo MIME do arquivo MP3.
<source src="audio/boas-vindas.mp3" type="____">Qual valor substitui ____? Digite sem aspas.
Para vídeo, a estrutura é a mesma. Neste exemplo, MP4 aparece antes de WebM. A ordem dos source indica a preferência de tentativa, considerando o suporte informado pelo navegador. São versões do mesmo vídeo, não vídeos para tocar em sequência.
<video controls>
<source src="video/passeio.mp4" type="video/mp4">
<source src="video/passeio.webm" type="video/webm">
</video>Atenção
O atributo type ajuda o navegador a descartar formatos que não suporta. Ele não converte o arquivo nem garante a troca para outra fonte diante de qualquer falha de carregamento ou reprodução.
Ordene as linhas para criar um vídeo com controles nativos. Coloque a versão WebM antes da MP4 e mantenha os dois source dentro do video.
Passo 5 de 7
Configure o tamanho de exibição do vídeo sem alterar sua proporção e use poster para apresentar uma imagem antes da reprodução.
No elemento video, use width para a largura e height para a altura. Os valores são numéricos, em pixels, sem escrever px.
Um vídeo de 1920 × 1080 pode ser exibido em 640 × 360, mantendo a proporção de 16:9:
<video controls
src="videos/plantio.mp4"
width="640"
height="360">
</video>Dica
width e height definem a área de exibição. Eles não alteram a resolução nem reduzem o tamanho do arquivo de vídeo.
Um vídeo de 1920 × 1080 será exibido com metade da largura original: width="960".
Complete o atributo para manter a proporção: height="___".
O atributo poster indica o endereço de uma imagem exibida antes de o vídeo começar a ser reproduzido. Ele é opcional.
Escolha uma imagem representativa: para um vídeo sobre plantio, por exemplo, uma foto das mãos preparando um vaso.
<video controls width="640" height="360"
poster="imagens/plantio.jpg">
<source src="videos/plantio.mp4" type="video/mp4">
<source src="videos/plantio.webm" type="video/webm">
</video>Dica
poster aponta para a imagem. src, no video ou em seus elementos source, aponta para o arquivo de vídeo.
Os atributos width, height e poster se aplicam a video, não a audio.
Um vídeo de 1280 × 720 já tem seus arquivos declarados em elementos source. A imagem imagens/plantio.jpg representa seu conteúdo.
Qual tag de abertura define uma largura de 800 pixels, mantém a proporção e usa essa imagem como apresentação?
Passo 6 de 7
Diferencie o conteúdo de reserva de um link sempre visível e ofereça acesso direto ao arquivo de mídia.
O texto ou link dentro de <audio> ou <video>, depois dos elementos <source>, é chamado de conteúdo de reserva. Ele é destinado a navegadores que não reconhecem o elemento de mídia.
<audio controls>
<source src="midia/entrevista.mp3" type="audio/mpeg">
<source src="midia/entrevista.ogg" type="audio/ogg">
Seu navegador não reconhece o elemento de áudio.
</audio>Atenção
Se o navegador reconhece <audio>, uma falha de carregamento ou de decodificação do arquivo não faz essa mensagem aparecer automaticamente. O mesmo vale para <video>.
Um navegador reconhece <audio>, mas não consegue decodificar o arquivo. Por isso, um link colocado como conteúdo de reserva dentro de <audio> aparecerá automaticamente.
Para oferecer uma alternativa sempre visível, coloque o link fora de <audio> ou <video>, próximo ao reprodutor. Use um texto que identifique a mídia e, quando útil, o formato do arquivo.
<video controls>
<source src="midia/passeio.mp4" type="video/mp4">
<source src="midia/passeio.webm" type="video/webm">
Seu navegador não reconhece o elemento de vídeo.
</video>
<p>
<a href="midia/passeio.mp4">Abrir vídeo do passeio (MP4)</a>
</p>Atenção
O navegador pode abrir o arquivo para reprodução em vez de baixá-lo. O link continua visível se o reprodutor falhar, mas não corrige um arquivo ausente ou incompatível.
Dica
Controles e links não substituem legendas, transcrições ou alternativas descritivas. Esses recursos serão abordados nos próximos tutoriais.
<audio controls>
<source src="midia/entrevista.mp3" type="audio/mpeg">
<source src="midia/entrevista.ogg" type="audio/ogg">
Seu navegador não reconhece o elemento de áudio.
<a href="midia/entrevista.mp3">Abrir entrevista (MP3)</a>
</audio>Mantenha o trecho existente e acrescente um link para o MP3 fora do reprodutor, com texto descritivo. Você pode escrever apenas o HTML que será adicionado, indicando onde ele entra. Explique por que esse link permanece visível mesmo quando a reprodução falha.
Escreva pelo menos 40 caracteres (0/40).
Passo 7 de 7
Complete uma página com arquivos reais de áudio e vídeo e confira a reprodução, a apresentação e os links no navegador.
Acesse a pasta de exemplos da MDN no GitHub. Abra cada arquivo abaixo e use o botão para baixar o arquivo original:
viper.mp3 e viper.ogg: versões do mesmo áudio.rabbit320.mp4 e rabbit320.webm: versões do mesmo trecho de animação.poster.png: imagem de apresentação do exemplo.Os pares são arquivos de mídia em formatos diferentes, não apenas extensões renomeadas. Salve os cinco arquivos em uma pasta chamada pratica-midia.
Salve este código como index.html dentro de pratica-midia, junto dos cinco arquivos. Assim, os caminhos usados na atividade serão apenas os nomes dos arquivos.
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Prática com áudio e vídeo</title>
</head>
<body>
<main>
<h1>Prática com áudio e vídeo</h1>
<h2>Áudio de exemplo</h2>
<p>Substitua este parágrafo pelo áudio e pelo link direto.</p>
<h2>Coelho: trecho de animação</h2>
<p>Substitua este parágrafo pelo vídeo e pelo link direto.</p>
</main>
</body>
</html>Dica
Confira se os seis arquivos estão na mesma pasta. Nas propriedades ou nos detalhes de rabbit320.mp4, consulte a largura e a altura do vídeo e anote os valores. Você poderá usá-los em width e height, preservando a proporção. Comece a atividade quando os arquivos estiverem disponíveis localmente.
No editor, substitua os dois parágrafos de orientação da página-base. Atenda aos requisitos:
audio e video, ambos com controls e sem autoplay.src e type: MP3 antes de Ogg; MP4 antes de WebM. Não use src nos elementos pais.poster.png e dimensões proporcionais, com números sem unidade escrita.Salve a página e cole abaixo o trecho completo de main.
Escreva pelo menos 100 caracteres (0/100).
Abra index.html no navegador e confira:
O link pode abrir a mídia para reprodução, sem iniciar um download.
Descreva os resultados reais: início manual, reprodução e pausa de ambas as mídias, apresentação do vídeo e destino dos dois links. Se encontrar uma falha, corrija a página e repita o teste antes de concluir.
Escreva pelo menos 60 caracteres (0/60).
Resumo
Parabéns! Você concluiu: Incorporar áudio e vídeo com controles nativos
Agora você consegue incorporar e conferir áudio e vídeo sem JavaScript. Controles e links não substituem alternativas acessíveis. No próximo tutorial, você aprenderá a adicionar legendas sincronizadas.
Milhares de cursos online em vídeo, ebooks e áudiobooks.
Para testar seus conhecimentos no decorrer dos cursos online
Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail
Baixe nosso aplicativo pelo QR Code ou pelos links abaixo:.
Leve o conhecimento no seu bolso.
Baixe o aplicativo Cursa.
São centenas de Cursos gratuitos a disposição, com Certificado de conclusão gratuito que é salvo em sua galeria de imagens do celular.
Baixe o app para ter acesso ao Certificado de conclusão de Curso Gratuitamente.
+ de 10 milhões
de alunos
Certificado grátis e
válido em todo o Brasil
60 mil exercícios
gratuitos
4,8/5 classificação
nas lojas de apps
Cursos gratuitos em
vídeo, ebooks e audiobooks
