O elementoHTML<video> incorpora um reprodutor de mídia que suporta a reprodução de vídeo no documento. Você também pode usar<video> para conteúdo de áudio, mas o elemento<audio> pode proporcionar uma experiência de usuário mais adequada.

Experimente

<video controls width="250">  <source src="/shared-assets/videos/flower.webm" type="video/webm" />  <source src="/shared-assets/videos/flower.mp4" type="video/mp4" />  Download the  <a href="/shared-assets/videos/flower.webm">WEBM</a>  or  <a href="/shared-assets/videos/flower.mp4">MP4</a>  video.</video>

O exemplo acima mostra um uso simples do elemento<video>. Semelhante ao elemento<img>, incluímos o caminho da mídia que queremos exibir dentro do atributosrc; também podemos incluir outros atributos para especificar informações, como largura e altura do vídeo, se queremos que ele seja reproduzido automaticamente e em loop, se queremos mostrar os controles de vídeo padrão do navegador etc.

O conteúdo dentro das tags de abertura e fechamento<video></video> é exibido como uma alternativa (fallback) em navegadores que não suportam o elemento.

Atributos

Como qualquer elemento HTML, este elemento suporta osatributos globais.

autoplay

Um atributo Booleano; se especificado, o video vai ser executado assim que possível sem precisar de carregar todo o arquivo.

Nota:Sites que reproduzem automaticamente áudio (ou vídeos com uma faixa de áudio) podem proporcionar uma experiência desagradável para os usuários, portanto, devem ser evitados sempre que possível. Se você precisar oferecer a funcionalidade de reprodução automática, é recomendável torná-la opcional (exigindo que o usuário a habilite especificamente). No entanto, isso pode ser útil ao criar elementos de mídia cuja fonte será definida posteriormente, sob controle do usuário. Consulte nossoguia sobre reprodução automática para obter informações adicionais sobre como usar a reprodução automática corretamente.

Para desativar a reprodução automática,autoplay="false" não vai funcionar; o vídeo será reproduzido automaticamente se o atributo estiver presente na tag<video>. Para remover a reprodução automática, o atributo deve ser removido por completo.

A reprodução automática não funciona em alguns navegadores (ex., Chrome 70.0) se o atributomuted estiver presente.

controls

Se esse atributo estiver presente, o navegador oferecerá controles para permitir o usuário controlar a reprodução do vídeo, incluindo volume, navegação (seek), e pausa/continuação da reprodução.

controlslist

O atributocontrolslist, quando definido, ajuda o navegador a selecionar que controles mostrar no elementovideo sempre que o navegador exibir o seu próprio conjunto de controles (ou seja, quando o atributocontrols for especificado).

Os valores permitidos sãonodownload,nofullscreen enoremoteplayback.

Use o atributodisablepictureinpicture se você quiser desabilitar o modo Picture-In-Picture (e o controle).

crossorigin

Esse atributoenumerado indica se deve usar CORS para buscar o vídeo relacionado.Recursos habilitados para CORS podem ser reutilizados no elemento<canvas> sem seremcontaminados. Os valores permitidos são:

• anonymousEnvia uma solicitação de origem cruzada sem uma credencial. Em outras palavras, ele envia o cabeçalho HTTPOrigin: sem um cookie, certificado X.509 ou realizar uma autenticação HTTP Basic. Se o servidor não fornecer credenciais ao site de origem (não definindo o cabeçalho HTTPAccess-Control-Allow-Origin:), o recurso será contaminado e seu uso restrito.
• use-credentials
  • : Envia uma solicitação de origem cruzada com uma credencial. Em outras palavras, envia o cabeçalho HTTPOrigin: com um cookie, um certificado, ou realiza autenticação HTTP Basic. Se o servidor não fornecer credenciais ao o site de origem (por meio do cabeçalho HTTPAccess-Control-Allow-Credentials:), o recurso será contaminado e seu uso será restrito.

Quando não está presente, o recurso é buscado sem uma solicitação CORS (ou seja, sem enviar o cabeçalho HTTPOrigin:), impedindo seu uso não contaminado em elementos<canvas>. Se for inválido, é tratado como se a palavra-chave enumeradaanonymous tivesse sido usada. Consulte osatributos de configuração de CORS para obter informações adicionais.

disablepictureinpicture

Impede o navegador de sugerir um menu de contexto Picture-in-Picture ou de solicitar automaticamente o Picture-in-Picture em alguns casos..

disableremoteplayback

Um atributo Booleano usado para desativar a capacidade de reprodução remota em dispositivos conectados usando tecnologias com fio (HDMI, DVI, etc.) e sem fio (Miracast, Chromecast, DLNA, AirPlay, etc.).

No Safari, você pode usarx-webkit-airplay="deny" como alternativa.

height

A altura da área de exibição do vídeo, empixels de CSS (apenas valores absolutos;sem porcentagens).

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.

playsinline

Um atributo booleano que indica que o vídeo deve ser reproduzido "em linha" (inline), ou seja, dentro da área de reprodução do elemento. Observe que a ausência deste atributonão implica que o vídeo será sempre reproduzido em tela cheia.

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.

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.
• astring vazia: é um sinônimo do valorauto.

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 recomende que seja definido para ometadata.

Nota:

• O atributoautoplay 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.

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, empixels de CSS (apenas valores absolutos;sem porcentagens).

Eventos

Notas de uso

Os navegadores não dão suporte a todos os mesmos formatos de vídeo; você pode fornecer múltiplas fontes dentro de elementos<source> aninhados, e o navegador utilizará a primeira que tiver suporte.

<video controls>  <source src="meuVideo.webm" type="video/webm" />  <source src="meuVideo.mp4" type="video/mp4" />  <p>    O seu navegador não tem suporte a vídeo HTML. Em vez disso, aqui está    <a href="meuVideo.mp4" download="meuVideo.mp4">o link do vídeo</a>.  </p></video>

Nós oferecemos um guia abrangente e detalhado sobretipos de arquivos de mídia e oguia sobre os codecs compatíveis com vídeo. Também está disponível umguia sobre os codecs de áudio que podem ser usados com eles.

Outras notas de uso:

• Se você não especificar o atributocontrols, o vídeo não incluirá os controles padrão do navegador; você pode criar seus próprios controles personalizados usando JavaScript e a APIHTMLMediaElement. ConsulteCriando um player de vídeo compatível com vários navegadores para obter mais detalhes.
• Para permitir o controle preciso do conteúdo do seu vídeo (e áudio), os elementosHTMLMediaElement disparam muitoseventos diferentes. Além de fornecer controlabilidade, esses eventos permitem que você monitore o progresso tanto do download quanto da reprodução da mídia, bem como o estado e a posição da reprodução.
• Você pode usar a propriedadeobject-position para ajustar o posicionamento do vídeo dentro do quadro do elemento e a propriedadeobject-fit para controlar como o tamanho do vídeo é ajustado para caber dentro do quadro.
• Para exibir legendas/legendas junto com o seu vídeo, você pode usar JavaScript junto com o elemento<track> e o formatoWebVTT. ConsulteAdicionando legendas em um vídeo HTML para obter mais informações.
• Você pode reproduzir arquivos de áudio usando um elemento<video>. Isso pode ser útil, por exemplo, se você precisar executar áudio com uma transcriçãoWebVTT, já que o elemento<audio> não permite legendas usando WebVTT.
• Para testar o conteúdo de alternativa (fallback) em navegadores que suportam o elemento, você pode substituir<video> por um elemento que não exista, como<notavideo>.

Uma boa fonte geral de informações sobre o uso de HTML<video> é o tutorial para iniciantes emConteúdo de vídeo e áudio.

Estilização com CSS

O elemento<video> é umreplaced element — seu valordisplay éinline por padrão, mas sua largura e altura padrão na viewport são definidas pelo vídeo que está sendo incorporado.

Não há considerações especiais para estilizar<video>; uma estratégia comum é atribuir a ele um valordisplay deblock para facilitar o posicionamento, o tamanho etc. e, em seguida, fornecer informações de estilo e layout conforme necessário.Noções básicas de estilo do player de vídeo fornece algumas técnicas de estilo úteis.

Detectando a adição e a remoção de faixas

Você pode detectar quando as faixas são adicionadas e removidas de um elemento<video> usando os eventosaddtrack eremovetrack. Entretanto, esses eventos não são enviados diretamente para o próprio elemento<video>. Em vez disso, eles são enviados para o objeto da lista de faixas dentro doHTMLMediaElement do elemento<video> que corresponde ao tipo de faixas que foi adicionada ao elemento:

HTMLMediaElement.audioTracks

UmAudioTrackList contendo todas as faixas de áudio do elemento de mídia. Você pode adicionar um listener no eventoaddtrack deste objeto para ser alertado quando novas faixas de áudio forem adicionadas ao elemento.

HTMLMediaElement.videoTracks

Adicione um listeneraddtrack a este objetoVideoTrackList para ser informado quando faixas de vídeo forem adicionadas ao elemento.

HTMLMediaElement.textTracks

Adicione um listener de eventoaddtrack a esteTextTrackList para ser notificado quando novas faixas de texto forem adicionadas ao elemento.

Por exemplo, para detectar quando faixas de áudio são adicionadas ou removidas de um elemento<video>, você pode usar um código como este:

const elem = document.querySelector("video");elem.audioTracks.onaddtrack = (event) => {  trackEditor.addTrack(event.track);};elem.audioTracks.onremovetrack = (event) => {  trackEditor.removeTrack(event.track);};

Este código monitora as faixas de áudio que foram adicionadas ou removidas do elemento e chama uma função hipotética em um editor de faixas para registrar e remover a faixa da lista de faixas disponíveis do editor.

Você também pode usaraddEventListener() para ouvir os eventosaddtrack eremovetrack.

Suporte do servidor para vídeo

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 .ogmAddType video/ogg .ogvAddType 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.

Exemplos

Fonte única

Esse exemplo reproduz um vídeo quando ativado, fornecendo ao usuário os controles de vídeo padrão do navegador para controlar a reprodução.

HTML

<!-- Exemplo de vídeo simples --><!-- 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org --><!-- Poster de peach.blender.org --><video  controls  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"  width="620">  Desculpe, seu navegador não suporta vídeos incorporados, mas não se preocupe,  você pode  <a href="https://archive.org/details/BigBuckBunny_124">baixá-lo</a>  e assisti-lo com seu player de vídeo favorito!</video>

Resultado

Até que o vídeo comece a ser reproduzido, a imagem fornecida no atributoposter é exibida em seu lugar. Se o navegador não tiver suporte para reprodução de vídeo, o texto de alternativa (fallback) será exibido.

Múltiplas fontes

Este exemplo se baseia no anterior, oferecendo três fontes diferentes para a mídia; isso permite que o vídeo seja assistido independentemente dos codecs de vídeo suportados pelo navegador.

HTML

<!-- Usando multiplas fontes como alternativa para a tag video --><!-- 'Elephants Dream' by Orange Open Movie Project Studio, licensed under CC-3.0, hosted by archive.org --><!-- Poster hospedado por Wikimedia --><video  width="620"  controls  poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg">  <source    src="https://archive.org/download/ElephantsDream/ed_hd.ogv"    type="video/ogg" />  <source    src="https://archive.org/download/ElephantsDream/ed_hd.avi"    type="video/avi" />  <source    src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"    type="video/mp4" />  Desculpe, seu navegador não suporta vídeos incorporados, mas não se preocupe,  você pode fazer o  <a    href="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"    download="ed_1024_512kb.mp4">    download do MP4  </a>  e assisti-lo com seu player de vídeo favorito!</video>

Resultado

Primeiro, é tentado o formatoOgg. Se não for possível reproduzi-lo, será tentado o AVI. Por fim, é tentado oMP4. Uma mensagem de fallback é exibida se o vídeo não puder ser reproduzido, mas a mesma não será exibida se todas as fontes falharem.

Alguns tipos de arquivos de mídia permitem que você forneça informações mais específicas usando o parâmetrocodecs como parte da string de tipo do arquivo. Um exemplo relativamente simples évideo/webm; codecs="vp8, vorbis", que indica que o arquivo é um vídeoWebM usandoVP8 para o vídeo eVorbis para o áudio.

Preocupações com a acessibilidade

Os vídeos devem fornecer legendas e transcrições que descrevam com precisão o seu conteúdo (consulteAdicionando legendas e subtítulos a vídeos em HTML para obter mais informações sobre como implementá-las). As legendas permitem que pessoas com perda auditiva compreendam o conteúdo de áudio de um vídeo enquanto ele está sendo reproduzido, enquanto as transcrições permitem que pessoas que precisam de mais tempo possam revisar o conteúdo de áudio em um ritmo e formato que seja confortável para elas.

Vale ressaltar que, embora seja possível legendar mídia somente de áudio, isso só pode ser feito ao reproduzir áudio em um elemento<video>, uma vez que a região de vídeo do elemento é usada para apresentar as legendas. Este é um dos cenários especiais em que é útil reproduzir áudio em um elemento de vídeo.

Se serviços de legendagem automática forem usados, é importante revisar o conteúdo gerado para garantir que ele represente com precisão o vídeo original.

Além do diálogo falado, legendas e transcrições também devem identificar músicas e efeitos sonoros que transmitam informações importantes. Isso inclui emoção e tom:

1400:03:14 --> 00:03:18[Música rock dramática]1500:03:19 --> 00:03:21[sussurrando] O que é aquilo lá longe?1600:03:22 --> 00:03:24É… é um…16 00:03:25 --> 00:03:32[Barulho alto][Barulho de pratos]

As legendas não devem obstruir o assunto principal do vídeo. Elas podem ser posicionadas usandoa configuraçãoalign VTT cue.

• Web Video Text Tracks Format (WebVTT)
• WebAIM: Captions, Transcripts, and Audio Descriptions
• MDN Understanding WCAG, Guideline 1.2 explanations
• Understanding Success Criterion 1.2.1 | W3C Understanding WCAG 2.0
• Understanding Success Criterion 1.2.2 | W3C Understanding WCAG 2.0

Sumário técnico

Especificações

Compatibilidade com navegadores

Veja também

• Guia para tipos de mídia e formatos para web

  • Formatos de contêiner de mídia (tipos de arquivo)
  • Guia de codecs de vídeo na Web
  • Guia de codecs de áudio da Web

• Posicionamento e dimensionamento da imagem em seu quadro:object-position andobject-fit

• <audio>

• Usando áudio e vídeo em HTML

• Manipulando vídeo usando canvas

• Configurando servidores para mídia Ogg