Introduced in HTML5
Sumário
O elemento HTML <video>
é utilizado para incorporar conteúdo de vídeo em um documento HTML ou XHTML.
Para uma lista de formatos suportados veja Media formats supported by the audio and video elements.
Contexto de uso
Conteúdo permitido | Transparent content, contendo ou um atributo src ou um ou mais elementos <source> , seguido por flow content ou phrasing content , sem <video> ou elementos <audio> . |
Omissão de tag | Nenhuma, tanto as tags iniciais quanto as finais devem estar presentes. |
Permissão de elementos pais | Qualquer elemento que aceite flow content, ou qualquer outro elemento que aceite phrasing content. |
Documento normativo | HTML 5, section 4.8.6 |
Atributos
Como qualquer elemento HTML, este elemento suporta os global attributes.
-
autoplay
- Um atributo Booleano; se especificado, o video vai ser executado assim que possível sem precisar de carregar todo o arquivo.
-
autobuffer
-
Um atributo Booleano; se especificado, o video vai começar a carregar automaticamente mesmo que não especificado para tocar automaticamente. Isso deve ser usado em casos que é esperado que o vídeo seja reproduzido (por exemplo, se o usuário acessa a página para assistir o vídeo, mas não se o vídeo estiver incorporado à pagina junto a outro conteúdo). O vídeo é carregado até que o cache de mídia.
Nota de implementação: embora parte dos primeiros rascunhos das especificações do HTML5, o atributo
autobuffer
foi removido das últimas versões. Ele foi removido do Gecko 2.0 e outros navegadores, e nunca implementado em outros. A especificação define um novo atributo enumerado,preload
, para substituir o atributoautobuffer
, com sintaxe diferente. bug 548523 -
buffered
-
Um atributo que pode ser lido para determinar os intervalos do vídeo que já foram carregados. Este atributo contém um objeto
TimeRanges
. -
controls
- Se esse atributo estiver presente, o Gecko oferecerá controles para permitir o usuário controlar a reprodução do vídeo, incluindo volume, navegação, e pausa/continuação da reprodução.
-
height
- A altura da área de exibição do vídeo, em pixels de CSS.
-
loop
- Um atributo Booleano; se especificado, ao chegar no fim do vídeo, ele voltará automaticamente para o começo.
-
muted
- Um atributo Booleano que indica a configuração padrão do áudio contido no vídeo. Se definido, o áudio vai começar mudo. Seu valor padrão é falso, significando que o áudio será reproduzido juntamente com o vídeo.
-
played
-
Um objeto
TimeRanges
indicando que todo o vídeo foi reproduzido. -
preload
-
Esse atributo enumerado pretende dar uma sugestão ao navegador sobre o que o autor pensa que proporcionará uma melhor experiência do usuário. Ele pode ter os seguintes valores:
- none: indica que o usuário não necessitará consultar o vídeo ou que o servidor quer minimizar seu tráfego; em outros termos indica que o vídeo não deve ser pré-carregado.
- metadata: indica que embora o usuário não necessitará consultar o vídeo, pegar os meta-dados (ex: comprimento) é interessante.
- auto: indica que o usuário necessita ter prioridade; em outros termos isso indicou que, se necessário, o vídeo inteiro pode ser baixado, mesmo que não seja esperado a execução.
- a string vazia: é um sinônimo do valor auto.
Se não definido, seu valor padrão será definido pelo navegador (isto é, cada navegador pode escolher seu valor padrão), embora a especificação recomenda que seja definido para o metadata.
Notas de uso:- O atributo
autoplay
tem precedência sobre opreload,
pois se é necessário executar o vídeo automaticamente, o navegador obviamente o baixará. Definindo ambosautoplay
epreload
é permitido pela especificação. - O navegador não é forçado pela especifição a seguir o valor desse atributo; é apenas uma sugestão.
-
poster
- Uma URL indicando uma imagem de prévia do vídeo até o usuário reproduzir ou navegar por ele. Se este atributo não estiver especificado, nada será mostrado até que o primeiro quadro esteja disponível; então o primeiro quadro será exibido como imagem de prévia.
-
src
-
A URL do vídeo a ser incorporado. Isto é opcional; ao invés disso você pode usar o elemento
<source>
dentro do bloco do vídeo para especificar o vídeo a ser incorporado . -
width
- A largura da área de exibição do vídeo, em pixels de CSS.
O tempo de compensação (time offset) entre o áudio e o vídeo está especificado como um valor de ponto flutuante (float) representando o número de segundos da compensação.
Exemplos
<!-- Exemplo simples de vídeo --> <video src="arquivovideo.ogg" autoplay poster="imagemprevia.jpg"> Desculpa, o seu navegador não suporta vídeos incorporados, mas você pode <a href="videofile.ogg">baixá-lo</a> e assistir pelo se reprodutor de mídia favorito! </video> <!-- Vídeo com legendas --> <video src="foo.ogg"> <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English"> <track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska"> </video>
O primeiro exemplo reproduz um vídeo, começando a reprodução assim que o vídeo for recebido para permitir a execução sem parar a execução para baixar mais. Até que o vídeo comece a reproduzir, a imagem "imagemprevia.jpg" será mostrada em seu lugar.
O segundo exemplo permite o usuário escolher entre diferentes legendas.
Suporte ao Servidor
Se o tipo MIME do vídeo não estiver definido corretamente no servidor, o vídeo poderá não ser mostrado ou uma caixa cinza contendo um X (se o JavaScript estiver habilitado) será exibida em seu lugar.
Se você disponibiliza seu vídeos como Ogg Theora, você pode corrigir esse problema para o servidor web Apache adicionando a extensão utilizada por seu arquivos de vídeo (".ogm", ".ogv", e ".ogg" são as mais comuns) para o tipo MIME "video/ogg" através do arquivo "mime.types" localizado em "/etc/apache" ou através da configuração de diretiva "AddType" no httpd.conf.
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg
Se você disponibilizar seu vídeos como WebM, você pode corrigir esse problema para o servidor web Apache adicionando a extensão usada por seu arquivos de vídeo (".webm" é a mais comum) para o tipo MIME "video/webm" através do arquivo "mime.types" localizado em "/etc/apache" ou através da configuração de diretiva "AddType" no httpd.conf.
AddType video/webm .webm
Seu serviço de hospedagem talvez forneça uma interface simples para mudar a configuração dos tipos MIME para as novas tecnologias até que uma atualização global ocorra naturalmente.
Interface do DOM
Esse elemento implementa a interface HTMLVideoElement
.
Compatibilidade dos Navegadores
Recurso | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Suporte Básico | 3.0 | 3.5 (1.9.1) | 9.0 | 10.5 | 3.1 |
Atributo autoplay |
3.0 | 3.5 (1.9.1) | 9.0 | 10.5 | 3.1 |
Atributo buffered |
? | 4.0 (2.0) | ? | ? | ? |
Atributo controls |
3.0 | 3.5 (1.9.1) | 9.0 | 10.5 | 3.1 |
Atributo loop |
3.0 | 11.0 (11.0) | 9.0 | 10.5 | 3.1 |
Atributo muted |
? | 11.0 (11.0) | ? | ? | ? |
Atributo played |
? | 15.0 (15.0) | ? | ? | ? |
Atributo poster |
3.0 | 3.6 (1.9.2) | 9.0 | 10.5 | 3.1 |
Atributo preload |
3.0 | 4.0 (2.0) | 9.0 | Suportado sobre o nome antigo de autobuffer |
3.1 |
Atributo src |
3.0 | 3.5 (1.9.1) | 9.0 | 10.5 | 3.1 |
Recurso | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Suporte Básico | ? | 1.0 (1.0) | ? | ? | ? |
Atributo autoplay |
? | 1.0 (1.0) | ? | ? | ? |
Atributo buffered |
? | 4.0 (2.0) | ? | ? | ? |
Atributo controls |
? | 1.0 (1.0) | ? | ? | ? |
Atributo loop |
? | 11.0 (11.0) | ? | ? | ? |
Atributo muted |
? | 11.0 (11.0) | ? | ? | ? |
Atributo played |
? | 15.0 (15.0) | ? | ? | ? |
Atributo poster |
? | 1.0 (1.0) | ? | ? | ? |
Atributo preload |
? | 4.0 (2.0) | ? | ? | ? |
Atributo src |
? | 1.0 (1.0) | ? | ? | ? |
Veja também
- Media formats supported by the audio and video elements
audio
- Using HTML5 audio and video
- Manipulating video using canvas
nsIDOMHTMLMediaElement
- TinyVid - exemplos utilizando arquivos ogg em HTML5.
- The
video
element (Especificação HTML 5) - Configuring servers for Ogg media