Curso de HTML / Incorporar áudio, vídeo e conteúdo externo
O HTML pode reproduzir arquivos de mídia com audio e video, ou exibir outro documento dentro de uma página com iframe. A integração bem-sucedida depende dos caminhos reais dos arquivos e dos formatos suportados. Controles úteis, legendas ou transcrições, assim como a confiabilidade de conteúdos externos, também são importantes.
Reproduzir arquivos de áudio e vídeo
O exemplo supõe que sample.mp3, sample.mp4 e sample-poster.webp estão ao lado do arquivo HTML. Para executá-lo, forneça arquivos que você tem permissão para usar e ajuste os nomes, se necessário. Os arquivos de mídia também exigem nomes de arquivos, caminhos e dimensões corretos, seguindo os princípios de Imagens: img, Texto alternativo e Dimensões.
<audio controls>
<source src="sample.mp3" type="audio/mpeg">
Seu navegador não suporta a reprodução de áudio.
</audio>
<video controls width="640" height="360" poster="sample-poster.webp">
<source src="sample.mp4" type="video/mp4">
<track src="sample-pt.vtt" kind="captions" srclang="pt-BR"
label="Legendas em português do Brasil" default>
Seu navegador não suporta a reprodução de vídeo.
</video>controls fornece os controles de reprodução do navegador, e poster é exibido antes da reprodução de um vídeo. Para a fala ou sons significativos, forneça legendas precisas. O sample-pt.vtt referenciado não é criado automaticamente. Sem este arquivo, as legendas não podem aparecer.
Um arquivo de legendas WebVTT é um texto UTF-8. Este exemplo mínimo mostra uma única indicação para os três primeiros segundos; as legendas reais devem cobrir a fala do vídeo e os sons importantes nos momentos apropriados.
WEBVTT
00:00:00.000 --> 00:00:03.000
Bem-vindo ao Pequeno Jardim.
Salve este bloco como sample-pt.vtt, em UTF-8. Não insira uma linha em branco entre os tempos e o texto da legenda: ela encerraria esse bloco de legenda. A referência do formato WebVTT na MDN descreve essa estrutura.
Quando informações importantes forem transmitidas por áudio, forneça também uma transcrição em texto. Permita que os usuários iniciem a reprodução por conta própria, em vez de acionar automaticamente o som de maneira inesperada. Se você oferecer vários formatos source, os arquivos subjacentes devem realmente usar esses formatos; renomear uma extensão não converte a mídia.
Incorporar conteúdo externo com iframe
Um iframe exibe outro documento dentro da página atual. A URL abaixo é um espaço reservado estrutural, e não uma integração de mídia funcional. Substitua-a por uma URL de integração oficial fornecida pelo provedor.
<iframe
src="https://example.com/embed/example"
title="Apresentação do conteúdo de exemplo"
width="640" height="360"
loading="lazy"></iframe>O title descreve o propósito do quadro incorporado. Um provedor pode proibir a integração, mesmo que a URL normal de sua página funcione. O conteúdo externo pode afetar a privacidade, cookies e desempenho, portanto, use apenas o código de integração oficial de um provedor confiável quando ele agregar valor. Indique o título ou o contexto do elemento incorporado no texto ao redor para que o artigo permaneça compreensível mesmo se não carregar.
Ajuste a mídia e teste um iframe local
Uma largura HTML de 640 não se ajusta automaticamente a uma janela de visualização estreita. Coloque este CSS em um elemento style dentro do head ou em uma folha de estilo vinculada. O vídeo mantém sua proporção intrínseca; o exercício do iframe usa uma caixa de exibição 16:9. Ajuste essa proporção quando o conteúdo incorporado exigir outra proporção.
video, iframe {
display: block;
width: 100%;
max-width: 640px;
}
video { height: auto; }
iframe {
height: auto;
aspect-ratio: 16 / 9;
}Você pode testar os caminhos do quadro, o layout e a navegação alternativa sem arquivo de vídeo. Salve esses dois arquivos UTF-8 juntos. Este exercício não depende de nenhum serviço externo nem de dados pessoais.
embed.html
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Instruções do exercício</title>
</head>
<body>
<h1>Instruções do Pequeno Jardim</h1>
<p>Este exemplo local é exibido em um iframe.</p>
</body>
</html>frame.html
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercício sobre iframes</title>
<style>
video, iframe {
display: block;
width: 100%;
max-width: 640px;
}
video { height: auto; }
iframe {
height: auto;
aspect-ratio: 16 / 9;
}
</style>
</head>
<body>
<h1>Ler as instruções</h1>
<iframe src="embed.html" title="Instruções do Pequeno Jardim" width="640" height="360"></iframe>
<p><a href="embed.html">Abrir as instruções em uma página separada</a></p>
</body>
</html>Abra frame.html e verifique o título e o parágrafo incorporados, depois teste se o quadro se ajusta a uma janela de 390px. Siga também o link para a página separada. Se você usar posteriormente uma integração externa, verifique o URL oficial desse fornecedor e sua política de integração.
WebVTT é um formato de texto que associa intervalos de tempo com legendas. Se as legendas falharem a partir de um arquivo local, verifique primeiro a existência, a extensão, a codificação UTF-8 e os intervalos das legendas, depois compare servindo o HTML, o vídeo e o VTT a partir de um mesmo servidor de desenvolvimento HTTP, com a mesma origem. As restrições sobre URLs de arquivos e tipos de mídia do servidor podem afetar o carregamento. Renomear uma extensão não é uma conversão de mídia.
<p><a href="sample.mp4">Abrir o arquivo de vídeo de exemplo</a></p>
<p><a href="transcript.html">Ler a transcrição do vídeo</a></p>Direcione as alternativas para arquivos e uma transcrição que você realmente preparou. O texto de reserva dentro do áudio/vídeo destina-se a navegadores que não suportam o elemento; não é uma mensagem de erro garantida para aparecer quando um navegador compatível não consegue carregar um arquivo. Mantenha as alternativas e transcrições necessárias disponíveis também fora do reprodutor.
Se a mídia não for reproduzida ou ajustada
- Verifique se o arquivo existe no caminho especificado e se o servidor envia o tipo de mídia apropriado.
- Verifique se o navegador suporta a codificação real do arquivo, não apenas sua extensão de nome de arquivo.
- Use o CSS para limitar a largura em telas pequenas sem distorcer a proporção do vídeo.
- Para conteúdo externo, verifique a política de incorporação e os termos do fornecedor.
Consulte a referência de vídeo MDN e a referência de iframe para os atributos específicos dos elementos. Aplique o escopo dos testes manuais em Bases de acessibilidade: títulos, links, imagens e teclado aos controles de reprodução, links alternativos e ao uso do teclado.
