20/08/2019 Vídeo em HTML5

w3schools.com

  HTML CSS MORE  

Vídeo em HTML5
❮ Anterior Próximo ❯

Exemplo de vídeo em HTML. Cortesia de Big Buck Bunny .

0:00 / 0:10

Tente você mesmo "

Reproduzindo vídeos em HTML

Antes do HTML5, um vídeo só podia ser reproduzido em um navegador com um plug-in
(como flash).
https://www.w3schools.com/html/html5_video.asp 1/10
20/08/2019 Vídeo em HTML5

O <video> elemento HTML5 especifica uma maneira padrão de incorporar um vídeo em

uma página da web.

Suporte de Navegador
Os números na tabela especificam a primeira versão do navegador que suporta
totalmente o <video> elemento.

Element

<video> 4.0 9.0 3.5 4.0 10.5

O elemento HTML <video>

Para mostrar um vídeo em HTML, use o <video> elemento:

Exemplo

<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Tente você mesmo "

Como funciona
O controls atributo adiciona controles de vídeo, como reproduzir, pausar e volume.

https://www.w3schools.com/html/html5_video.asp 2/10
20/08/2019 Vídeo em HTML5

É uma boa ideia incluir sempre width e height atributos. Se a altura e a largura não
estiverem definidas, a página poderá piscar enquanto o vídeo for carregado.

O <source> elemento permite que você especifique arquivos de vídeo alternativos que o
navegador pode escolher. O navegador usará o primeiro formato reconhecido.

O texto entre as tags <video> e </video> será exibido apenas em navegadores que não
suportam o <video> elemento.

HTML <video> Autoplay

Para iniciar um vídeo, use automaticamente o autoplay atributo:

Exemplo

<video width="320" height="240" autoplay>

<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Tente você mesmo "

O atributo de reprodução automática não funciona em dispositivos móveis como o

iPad e o iPhone.

Vídeo em HTML - Suporte ao Navegador

No HTML5, existem 3 formatos de vídeo suportados: MP4, WebM e Ogg.

O suporte do navegador para os diferentes formatos é:

Browser MP4 WebM Ogg

Internet Explorer YES NO NO

Chrome YES YES YES

Firefox YES YES YES

https://www.w3schools.com/html/html5_video.asp 3/10
20/08/2019 Vídeo em HTML5

Safari YES NO NO

Opera YES (from Opera YES YES

25)

Vídeo em HTML - Tipos de mídia

File Format Media Type

MP4 video/mp4

WebM video/webm

Ogg video/ogg

Vídeo HTML - Métodos, Propriedades e Eventos

HTML5 define métodos DOM, propriedades e eventos para o <video> elemento.

Isso permite que você carregue, reproduza e pause vídeos, além de definir a duração e o
volume.

Há também eventos DOM que podem notificá-lo quando um vídeo começa a ser
reproduzido, é pausado etc.

Exemplo: usando JavaScript

A pausa grande Pequeno Normal

https://www.w3schools.com/html/html5_video.asp 4/10
20/08/2019 Vídeo em HTML5

Vídeo cortesia de Big Buck Bunny .

Tente você mesmo "

Para uma referência completa do DOM, acesse nossa Referência de DOM de áudio / vídeo
em HTML5 .

Tags de vídeo em HTML5

Tag Description

<video> Defines a video or movie

<source> Defines multiple media resources for media elements, such as

<video> and <audio>

<track> Defines text tracks in media players

❮ Anterior Próximo ❯

https://www.w3schools.com/html/html5_video.asp 5/10
20/08/2019 Vídeo em HTML5

COLOR PICKER

COMO

Tabs
Dropdowns
Acordeões
Side Navigation
Top Navigation
Modal caixas de
barras de progresso
Parallax

https://www.w3schools.com/html/html5_video.asp 6/10
20/08/2019 Vídeo em HTML5

Login Form
HTML inclui
o Google Maps
Faixa Sliders
Tooltips
Slideshow
Filtrar Lista
Sort List

COMPARTILHAR

 


CERTIFICADOS
HTML
CSS
JavaScript
SQL
Python
PHP
jQuery
Bootstrap
XML

Consulte Mais informação "

https://www.w3schools.com/html/html5_video.asp 7/10
20/08/2019 Vídeo em HTML5

https://www.w3schools.com/html/html5_video.asp 8/10
20/08/2019 Vídeo em HTML5

REPORTAR ERRO

IMPRIMIR PÁGINA

FÓRUM

SOBRE

Top Tutoriais
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
SQL Tutorial
Python Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
PHP Tutorial
jQuery Tutorial
Java Tutorial

Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
jQuery Reference
Angular Reference
Java Reference

https://www.w3schools.com/html/html5_video.asp 9/10
20/08/2019 Vídeo em HTML5

Top Examples
HTML Examples
CSS Examples
JavaScript Examples
How To Examples
SQL Examples
Python Examples
W3.CSS Examples
Bootstrap Examples
PHP Examples
jQuery Examples
Java Examples
XML Examples

Web Certificates
HTML Certificate
CSS Certificate
JavaScript Certificate
SQL Certificate
Python Certificate
jQuery Certificate
PHP Certificate
Bootstrap Certificate
XML Certificate

Get Certified »

O W3Schools é otimizado para aprendizado, teste e treinamento. Exemplos podem ser simplificados para
melhorar a leitura e compreensão básica. Tutoriais, referências e exemplos são constantemente revisados para
evitar erros, mas não podemos garantir total correção de todo o conteúdo. Ao usar este site, você concorda em
ler e aceitar nossos termos de uso , cookies e política de privacidade . Copyright 1999-2019 por Refsnes Data.
Todos os direitos reservados.
Alimentado por W3.CSS .

https://www.w3schools.com/html/html5_video.asp 10/10