Vídeos no documento HTML
Como adicionar um vídeo ao documento HTML?
Utilize o elemento <video> para inserir vídeos no documento HTML. Especifique o link do vídeo no atributo src.
Exemplo:
<video src="/videos/retro.mp4" width="400" height="225" controls loop></video>
No exemplo acima, adicionamos o vídeo retro.mp4 através do atributos src. Também configuramos para mostrar os controles de reprodução adicionando o atributo controls, assim como o atributos loop para que o vídeo sempre repita.
Você também pode especificar o arquivo do vídeo através do elemento <source>.
Exemplo:
<video width="400" height="240" controls>
<source src="/videos/retro.mp4" type="video/mp4">
</video>
Como adicionar legendas ao vídeo?
Utilize o elemento <track> para legendas ao vídeo. Vejamos o exemplo a seguir:
<video src="/videos/meditando.mp4" width="400" height="225" controls loop>
<track kind="subtitles" src="/videos/meditando.vtt" srclang="pt" label="Português" default>
<track kind="subtitles" src="/videos/meditando-en.vtt" srclang="en" label="Inglês">
</video>
Dica: experimente trocar a legenda para inglês na opções do vídeo.
Como adicionar um texto alternativo do vídeo?
Podemos adicionar um texto alternativo ao vídeo adicionando um texto dentro do elemento <video>.
Exemplo:
<video width="320" height="auto" controls>
<source src="video.mp4" type="video/mp4">
Seu navegador não suporta vídeos incorporados
</video>
Como configurar um vídeo responsivo?
Para manter o vídeo em proporções responsivas utilizamos os dois seguintes atributos CSS:
- width: Definir a largura em 100% com
width="100%"; - height: Definir a altura automática com
height="auto".
Vejamos o resultado do código quando aplicamos os atributos ao vídeo:
<!-- Vídeo com 100% de largura -->
<video width="100%" height="auto" controls loop>
<source src="/videos/girls.mp4" type="video/mp4">
</video>
<!-- Container com 50% de largura -->
<div style="width:50%">
<video width="100%" height="auto" controls loop>
<source src="/videos/girls.mp4" type="video/mp4">
</video>
</div>
No exemplo acima, utilizamos uma <div> com 50% de largura afim de mostrar que o vídeo se adapta ao tamanho do container.
Caso queira que o vídeo não ultrapasse o seu tamanho real, utilize o estilo max-width:100% para definir que sua largura nunca deve passar de 100%.
Principais atributos de <video>:
| Atributo | Descrição |
|---|---|
src | Especifica o link do vídeo. |
autoplay | Inicia o vídeo no carregamento da página. |
controls | Mostra os botões de controle do vídeo. |
loop | Repete o vídeo infinitamente. |
muted | Inicia o vídeo mutado por padrão. |
preload | Especifica que o vídeo deve ser carregado antes mesmo de iniciar. |
poster | Mostra a imagem de fundo especificada antes de tocar o vídeo. |
Origem dos nomes dos atributos de <video>:
| Atributo | Origem | Tradução |
|---|---|---|
src | Source | Fonte |
autoplay | Autoplay | Autotocar |
controls | Controls | Controles |
loop | Loop | Repetição |
muted | Muted | Mudo |
preload | Preload | Pré-carregar |
poster | Poster | Poster |