Chrome Dev Summit 2018 is happening now and streaming live on YouTube. Watch now.

Vídeo

Os usuários gostam de vídeos — eles podem ser divertidos e informativos. Em dispositivos móveis, os vídeos podem ser uma maneira mais fácil de consumir informações. No entanto, vídeos gastam largura de banda e nem sempre têm a mesma aparência em todas as plataformas. Os usuários não gostam de esperar o carregamento de vídeos nem de não obter uma resposta quando tentam reproduzir um vídeo. Continue lendo para conhecer as maneiras mais simples de adicionar vídeos ao seu site e garanta a melhor experiência possível para os usuários em qualquer dispositivo.

Adicione um vídeo

TL;DR

  • Use o elemento video para carregar, decodificar e reproduzir vídeos no seu site.
  • Produza vídeos em vários formatos para abranger diversas plataformas móveis.
  • Dimensione os vídeos corretamente e garanta que eles não ultrapassem seus contêineres.
  • A acessibilidade é importante. Adicione o elemento track como filho do elemento video.

Adicione o elemento video

Adicione o elemento video para carregar, decodificar e reproduzir vídeos no seu site:

<video src="chrome.webm" type="video/webm">
    <p>Your browser does not support the video element.</p>
</video>

Especifique vários formatos de arquivo

Nem todos os navegadores oferecem suporte para os mesmos formatos de vídeo. O elemento <source> permite que você especifique vários formatos como garantia caso o navegador do usuário não ofereça suporte a um deles. Por exemplo:

Por exemplo:

<video controls>
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm">
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4">
  <p>This browser does not support the video element.</p>
</video>

Experimente

Quando o navegador analisa as tags <source>, ele usa o atributo opcional type para decidir qual arquivo baixar e reproduzir. Se o navegador oferecer suporte a WebM, reproduzirá chrome.webm. Caso contrário, ele verificará se é possível reproduzir vídeos MPEG-4

Confira A Digital Media Primer for Geeks para saber mais sobre como arquivos de vídeo e áudio funcionam na Web.

Essa abordagem apresenta diversas vantagens em relação à apresentação de diferentes scripts HTML ou no lado do servidor, especialmente para dispositivos móveis:

  • Os desenvolvedores podem listar formatos em ordem de preferência.
  • A troca nativa do lado do cliente reduz a latência. Apenas uma solicitação é feita para obter o conteúdo.
  • Permitir que o navegador escolha um formato é mais simples, rápido e potencialmente mais confiável do que usar um banco de dados de suporte no lado do servidor com detecção de user-agent.
  • Especificar o tipo da fonte de cada arquivo melhora o desempenho da rede; o navegador pode selecionar uma fonte de vídeo sem precisar fazer download de parte do vídeo para identificar o formato.

Todos esses fatores são extremamente importantes em contextos de dispositivos móveis, nos quais a largura de banda e a latência são escassas e a paciência do usuário provavelmente é limitada. Não incluir um atributo type pode afetar o desempenho quando há várias fontes com tipos incompatíveis.

Usando as ferramentas de desenvolvedor do seu navegador móvel, compare a atividade de rede com atributos type e sem atributos type.

Além disso, verifique os cabeçalhos de resposta nas ferramentas de desenvolvedor do navegador para garantir que o servidor reporte o tipo MIME certo; caso contrário, as verificações de tipo de fonte de vídeos não funcionarão.

Especifique horários de início e término

Economize largura de banda e deixe seu site mais responsivo: use a Media Fragments API para adicionar horários de início e de término ao elemento video.

Para adicionar um fragmento de mídia, basta incluir #t=[start_time][,end_time] no URL da mídia. Por exemplo, para reproduzir o vídeo entre os segundos 5 e 10, especifique:

<source src="video/chrome.webm#t=5,10" type="video/webm">

Você também pode usar a Media Fragments API para apresentar diversas visualizações no mesmo vídeo – como pontos de sinalização em um DVD – sem precisar codificar e enviar vários arquivos.

Usando as ferramentas de desenvolvedor do navegador, verifique se Accept-Ranges: bytes está presente nos cabeçalhos de resposta:

Captura de tela do Chrome DevTools: Accept-Ranges: bytes

Inclua uma imagem de pôster

Adicione um atributo poster ao elemento video para que seus usuários tenham uma ideia do conteúdo assim que o elemento for carregado, sem precisar fazer o download do vídeo ou iniciar a reprodução.

<video poster="poster.jpg" ...>
  ...
</video>

Um pôster também pode ser um plano B se o src do vídeo for inválido ou se nenhum dos formatos de vídeo fornecidos for compatível. A única desvantagem de imagens de pôster é uma solicitação de arquivo adicional, que consome mais largura de banda e exige renderização. Para saber mais, consulte Otimização de imagens.

Veja uma comparação lado a lado de vídeos com e sem uma imagem de pôster – deixamos a imagem em escala de cinza para provar que ela não faz parte do vídeo:

Captura de tela do Android Chrome, retrato: sem pôster
Captura de tela do Android Chrome, retrato: sem pôster
Captura de tela do Android Chrome, retrato: com pôster
Captura de tela do Android Chrome, retrato: com pôster

Forneça alternativas para plataformas legadas

Nem todos os formatos de vídeo são compatíveis com todas as plataformas. Verifique quais formatos são compatíveis com as principais plataformas e certifique-se de que seu vídeo funcione em todas elas.

Verifique quais formatos são compatíveis

Use canPlayType() para descobrir quais formatos de vídeo são compatíveis. O método comporta um argumento de string que consiste em um mime-type e codecs opcionais e retorna um dos seguintes valores:

Valor de retorno e descrição
(string vazia) O contêiner e/ou codec não é compatível.
maybe O contêiner e o(s) codec(s) podem ser compatíveis, mas o navegador precisará fazer o download de parte do vídeo para verificar.
probably O formato parece ser compatível.

Veja alguns exemplos de argumentos canPlayType() e de valores de retornos para execução no Chrome:

Tipo e resposta
video/xyz (string vazia)
video/xyz; codecs="avc1.42E01E, mp4a.40.2" (string vazia)
video/xyz; codecs="nonsense, noise" (string vazia)
video/mp4; codecs="avc1.42E01E, mp4a.40.2" probably
video/webm maybe
video/webm; codecs="vp8, vorbis" probably

Produza vídeos em vários formatos

Existem muitas ferramentas que ajudam a salvar o mesmo vídeo em diferentes formatos:

Verifique o formato usado

Quer saber qual formato de vídeo foi escolhido pelo navegador?

Em JavaScript, use a propriedade currentSrc do vídeo para retornar a fonte usada.

Dimensione vídeos corretamente

Quando se trata de deixar os usuários felizes, o tamanho do arquivo é importante.

TL;DR

  • Não exiba vídeos com frames de tamanho maior ou qualidade superior do que a plataforma pode suportar.
  • Não crie vídeos maiores do que deveria.
  • Vídeos longos causam oscilações no download e na busca e alguns navegadores podem precisar aguardar até que o vídeo seja baixado para iniciar a reprodução.

Verifique o tamanho do vídeo

O tamanho real do frame do vídeo, conforme for codificado, pode ser diferente das dimensões do elemento video (assim como uma imagem pode não ser exibida com suas dimensões reais).

Para verificar o tamanho codificado de um vídeo, use as propriedades videoWidth e videoHeight do elemento video. width e height retornam as dimensões do elemento video, que pode ter sido dimensionado usando CSS ou os atributos width e height em linha.

Garanta que os vídeos não ultrapassem os contêineres

Quando elementos de vídeo são grandes demais para a janela de visualização, eles podem ultrapassar o contêiner, impossibilitando que os usuários vejam o conteúdo ou usem os controles.

Captura de tela do Android Chrome, retrato: elemento video sem estilo ultrapassa a janela de visualização
Captura de tela do Android Chrome, retrato: elemento video sem estilo ultrapassa a janela de visualização
Captura de tela do Android Chrome, paisagem: elemento video sem estilo ultrapassa a janela de visualização
Captura de tela do Android Chrome, paisagem: elemento video sem estilo ultrapassa a janela de visualização

Você pode controlar as dimensões do vídeo usando JavaScript ou CSS. Bibliotecas JavaScript e plug-ins como o FitVids permitem manter um tamanho e uma taxa de proporção apropriados, mesmo para vídeos Flash do YouTube e de outras fontes.

Use consultas de mídia CSS para especificar o tamanho de elementos dependendo das dimensões da janela de visualização; max-width: 100% é muito útil.

Para conteúdo de mídia em iframes (como vídeos do YouTube), experimente uma abordagem responsiva (como a proposta por John Surdakowski).

CSS:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML:

<div class="video-container">
  <iframe src="//www.youtube.com/embed/l-BA9Ee2XuM"
          frameborder="0" width="560" height="315">
  </iframe>
</div>

Experimente

Compare o exemplo responsivo à versão não responsiva.

Personalize o reprodutor de vídeos

Diferentes plataformas exibem vídeos de forma diferente. Soluções para dispositivos móveis precisam considerar a orientação do dispositivo. Use a Fullscreen API para controlar a visualização em tela cheia do conteúdo de vídeo.

Como a orientação funciona em diferentes dispositivos

A orientação do dispositivo não é um problema para monitores de desktop ou laptops, mas é extremamente importante ao considerar o design de uma página da Web para celulares e tablets.

O Safari do iPhone troca entre as orientações de retrato e paisagem de forma adequada:

Captura de tela de um vídeo reproduzido no Safari do iPhone, retrato
Captura de tela de um vídeo reproduzido no Safari do iPhone, retrato
Captura de tela de um vídeo reproduzido no Safari do iPhone, paisagem
Captura de tela de um vídeo reproduzido no Safari do iPhone, paisagem

A orientação do dispositivo pode ser problemática em um iPad ou no Chrome do Android. Por exemplo, sem qualquer personalização, um vídeo reproduzido em um iPad na orientação paisagem tem a seguinte aparência:

Captura de tela de um vídeo reproduzido no Safari no iPad Retina, paisagem

Definir width: 100% ou max-width: 100% para o vídeo com CSS pode solucionar muitos problemas de layout relacionados à orientação do dispositivo. Considere também alternativas para o modo de tela inteira.

Exibição em linha ou em tela inteira

Captura de tela de um elemento video no iPhone, retrato

Diferentes plataformas exibem vídeos de forma diferente. O Safari em um iPhone exibe um elemento video em linha em uma página da Web, mas reproduz o vídeo no modo de tela inteira:

Captura de tela de um vídeo reproduzido no Chrome do Android, retrato

No Android, os usuários podem solicitar o modo de tela inteira clicando no ícone do recurso. No entanto, o padrão é reproduzir o vídeo em linha:

Captura de tela de um vídeo reproduzido no Safari no iPad Retina, paisagem

O Safari do iPad reproduz vídeos em linha:

Controle do modo de tela inteira do conteúdo

Para plataformas que não forçam a reprodução de vídeos em tela inteira, a Fullscreen API tem amplo suporte. Use essa API para controlar o modo de tela inteira do conteúdo ou da página.

Para colocar um elemento, como um vídeo, no modo de tela inteira:

elem.requestFullScreen();

Para colocar todo o documento no modo de tela inteira:

document.body.requestFullScreen();

Você também pode escutar mudanças no estado de tela inteira:

video.addEventListener("fullscreenchange", handler);

Também é possível verificar se o elemento está no modo de tela inteira no momento:

console.log("In full screen mode: ", video.displayingFullscreen);

Você também pode usar a pseudoclasse :fullscreen do CSS para alterar a maneira com a qual os elementos são exibidos no modo de tela inteira.

Em dispositivos compatíveis com a Fullscreen API, considere usar imagens de miniatura como marcadores para vídeos:

Para ver esse recurso em ação, confira esta demonstração.

A acessibilidade é importante

A acessibilidade não é um recurso. Usuários que não conseguem ouvir nem enxergar não terão a experiência do vídeo sem legendas ou descrições. O tempo necessário para adicionar esses elementos é muito menor do que a experiência ruim apresentada aos usuários. Forneça pelo menos uma experiência básica para todos os usuários.

Inclua legendas para melhorar a acessibilidade

Captura de tela mostrando legendas exibidas usando o elemento track no Chrome no Android

Para que mídias sejam mais acessíveis em dispositivos móveis, inclua legendas ou descrições usando o elemento track.

Adicione o elemento track

É muito fácil adicionar legendas ao seu vídeo – basta incluir um elemento track como filho do elemento video:

<video controls>
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm" />
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4" />
  <track src="chrome-subtitles-en.vtt" label="English captions"
         kind="captions" srclang="en" default>
  <p>This browser does not support the video element.</p>
</video>

Experimente

O atributo src do elemento track fornece o local do arquivo da faixa.

Defina legendas no arquivo da faixa

Um arquivo de faixa consiste em "deixas" cronometradas em formato WebVTT:

WEBVTT

00:00.000 --> 00:04.000
Man sitting on a tree branch, using a laptop.

00:05.000 --> 00:08.000
The branch breaks, and he starts to fall.

...

Referência rápida

Atributos do elemento video

Para obter uma lista completa dos atributos do elemento video e suas definições, consulte as especificações do elemento video.

Atributo Disponibilidade Descrição
src Todos os navegadores. Endereço (URL) do vídeo.
poster Todos os navegadores. Endereço (URL) de um arquivo de imagem que o navegador pode mostrar assim que o elemento video for exibido sem baixar o conteúdo do vídeo.
preload Todos os dispositivos móveis ignoram o pré-carregamento. Indica ao navegador que pré-carregar metadados (ou parte do vídeo) antes da reprodução é útil. As opções são none, metadata ou auto (consulte a seção Pré-carregamento para obter detalhes).
autoplay Sem suporte no iPhone ou Android; com suporte em todos os navegadores de computador, no iPad, no Firefox e no Opera para Android. Inicia o download e a reprodução assim que possível (consulte a seção Reprodução automática para obter detalhes).
loop Todos os navegadores. Repete o vídeo.
controls Todos os navegadores. Mostra os controles padrão de vídeo (reproduzir, pausar etc.).

Reprodução automática

Em computadores, autoplay instrui o navegador a baixar e reproduzir o vídeo imediatamente. No iOS e no Chrome para Android, o autoplay não funciona; os usuários devem tocar na tela para reproduzir o vídeo.

Mesmo em plataformas nas quais a reprodução automática é possível, você deve considerar se é uma boa ideia ativar esse recurso:

  • O uso de dados pode ser caro.
  • Fazer com que mídias sejam baixadas e reproduzidas sem pedir permissão do usuário pode monopolizar a largura de banda e a CPU de forma inesperada e atrasar a renderização da página.
  • Os usuários podem estar em um contexto no qual a reprodução de vídeo ou áudio seja intrusiva.

O comportamento de reprodução automática pode ser configurado no Android WebView pela WebSettings API. O valor padrão é true, mas um aplicativo WebView pode optar por desativar o recurso.

Pré-carregamento

O atributo preload indica ao navegador a quantidade de informações ou conteúdo deve ser pré-carregada.

Valor & descrição
none O usuário pode não assistir ao vídeo – não pré-carregar conteúdo.
metadata Metadados (duração, dimensões, faixas de texto) devem ser pré-carregados, mas com quantidade mínima de vídeo.
auto Baixar o vídeo completo imediatamente é desejável.

O atributo preload tem diferentes efeitos em diferentes plataformas. Por exemplo, o Chrome tem um buffer de 25 segundos de vídeo em computadores, mas nenhum no iOS ou no Android. Isso significa que, em dispositivos móveis, pode haver atrasos no início da reprodução que não estão presentes em computadores. Consulte a página de teste de Steve Souders para obter os detalhes completos.

JavaScript

Este artigo do HTML5 Rocks sobre vídeos resume muito bem as propriedades, os métodos e os eventos JavaScript que podem ser usados para controlar a reprodução de vídeos. Nós incluímos esse conteúdo aqui, atualizando-o com preocupações específicas a dispositivos móveis quando relevante.

Propriedades

Propriedade & descrição
currentTime Obtém ou define a posição da reprodução em segundos.
volume Obtém ou define o nível de volume do vídeo.
muted Obtém ou define a desativação do áudio.
playbackRate Obtém ou define a taxa de reprodução; 1 é a velocidade de reprodução normal.
buffered Informações sobre a quantidade do vídeo está em buffer e pronta para ser reproduzida.
currentSrc O endereço do vídeo sendo reproduzido.
videoWidth A largura do vídeo em pixels (que pode ser diferente da largura do elemento video).
videoHeight A altura do vídeo em pixels (que pode ser diferente da altura do elemento video).

playbackRate (veja a demonstração) ou volume não são suportados em dispositivos móveis.

Métodos

Método & descrição
load() Carrega ou recarrega uma origem de vídeo sem iniciar a reprodução: por exemplo, quando o src do vídeo é alterado usando JavaScript.
play() Reproduz o vídeo do local atual.
pause() Pausa o vídeo no local atual.
canPlayType('format') Descobre quais formatos são compatíveis (consulte Verificar quais formatos são compatíveis).

Em dispositivos móveis (exceto no Opera do Android), play() e pause() não funcionam a não ser que sejam chamados em resposta a uma ação do usuário, como o clique em um botão: confira a demonstração. (Da mesma forma, não é possível iniciar a reprodução de conteúdo como vídeos incorporados do YouTube.)

Eventos

Esses são apenas um subconjunto dos eventos de mídia que podem ser acionados. Consulte a página Eventos de mídia na Mozilla Developer Network para obter uma lista completa.

Evento & descrição
canplaythrough Acionado quando dados suficientes estão disponíveis de forma que o navegador acredite que possa reproduzir o vídeo por completo sem interrupções.
ended Acionado quando o vídeo termina de ser reproduzido.
error Acionado se um erro ocorre.
playing Acionado quando um vídeo começa a ser reproduzido pela primeira vez após ser pausado ou reiniciado.
progress Acionado periodicamente para indicar o progresso do download.
waiting Acionado quando uma ação é atrasada aguardando a conclusão de outra ação.
loadedmetadata Acionado quando o navegador termina de carregar os metadados do vídeo: duração, dimensões e faixas de texto.