video

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 atributo autobuffer, 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 o preload,pois se é necessário executar o vídeo automaticamente, o navegador obviamente o baixará. Definindo ambos autoplay e preload é 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.

Nota: A definição de valor de tempo de compensação ainda não foi completada na especificação do HTML 5 e está sujeita a mudança.

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

Document Tags and Contributors

Contributors to this page: LeonardoPacheco
Última atualização por: LeonardoPacheco,