Vá além das imagens com vídeos básicos para a Web

Aprenda o básico sobre vídeos. Aumente o engajamento.

Você está pensando em adicionar vídeos ao seu site? À medida que os dispositivos e as conexões de rede ficam mais rápidos e poderosos, você pode ir além das imagens e adicionar vídeos ao seu conjunto de ferramentas para criar a Web. Pesquisas mostram que os sites com vídeos geram mais engajamento e vendas. Portanto, mesmo que você ainda não tenha adicionado vídeos aos seus sites, provavelmente é apenas uma questão de tempo até que você faça isso.

Provavelmente, os arquivos de vídeo que você adicionar ao seu site serão os maiores arquivos que serão transferidos por download. Por isso, é extremamente importante garantir que os arquivos sejam criados para uma reprodução rápida e estável para todos os clientes. Embora o vídeo possa aumentar o engajamento e a satisfação do cliente, um vídeo que não é reproduzido ou trava durante a reprodução pode frustrar o cliente. Esta postagem se concentra no uso da tag <video> HTML5 para exibir vídeos e, portanto, não aborda o streaming de vídeo.

Então vamos começar.

Tag <video>

Parece óbvio, certo? Para adicionar um vídeo, você precisa adicionar a tag <video>, apontar para uma fonte e começar a corrida!

<video src="myVideo.mp4">

E você está certo. Em um nível mais alto, isso é tudo o que você precisa para adicionar um vídeo à Web. No entanto, há muitos atributos que podem ser adicionados à tag do vídeo para melhorar o layout e a entrega do vídeo.

Tag <source>

Talvez a melhor maneira de melhorar a entrega de vídeos na Web seja otimizar os arquivos que são enviados para o navegador. Para fazer isso, use a tag <source>:

<video>
  <source src="myWebmVideo.webm" type="video/webm">
  <source src="myh265Video.mp4" type="video/mp4">
  <source src="myh264Video.mp4" type="video/mp4">
</video>

Isso faz referência a três arquivos de origem separados. O navegador começa na parte de cima e escolhe o primeiro formato e codec que pode usar. No mundo dos vídeos, o formato de arquivo, geralmente chamado de contêiner, pode ser salvo com codecs diferentes, cada um com atributos diferentes. (Saiba mais sobre isso.) No exemplo acima, a primeira opção é o formato WebM (que pode ser codificado com codecs VP8 ou VP9) e é compatível (no momento da escrita) com 78% dos usuários globais. A segunda opção é o codec H.265 do mp4, que tem suporte no iOS e em Macs mais recentes. Esses codecs são mais recentes e têm melhoria na compactação de dados, além de oferecer a mesma qualidade de vídeo que os formatos mais antigos.

A última opção da lista é o H.264 mp4, que tem suporte de 92% dos usuários globais, mas é um formato mais antigo e, como tal, geralmente é muito maior do que os vídeos WebM ou H.265. Confira a diferença em um filme de dois minutos:

Codec Tamanho do arquivo
VP8 5,5 MB
VP9 4,2 MB
H.265 5,4 MB
H.264 16,1 MB

Enviar arquivos menores é a melhor otimização de desempenho que você pode fazer para melhorar a entrega dos seus vídeos. Quando um vídeo menor é transferido por download, a reprodução ocorre mais rápido, e o buffer de vídeo é preenchido mais rapidamente. Isso leva a menos interrupções durante a reprodução de vídeo. Além disso, a carga do servidor é reduzida, o que compensa o aumento dos requisitos de armazenamento de vários arquivos de vídeo.

O atributo de pré-carregamento

Os vídeos não podem começar a ser reproduzidos até que um vídeo seja baixado e armazenado localmente. Usando o atributo de pré-carregamento, é possível controlar a quantidade de vídeo que é transferida por download no carregamento da página. Há três valores para o atributo de pré-carregamento: auto, metadata e none.

preload='auto'

Se 'auto' for usado, o vídeo inteiro será transferido, não importa se o usuário pressionar "Reproduzir" ou não. Isso permite a reprodução rápida do vídeo, já que ele é baixado localmente antes que o usuário pressione o botão "Play". Do ponto de vista do uso de dados (e da carga do servidor), isso só deve ser usado quando é altamente provável que o vídeo seja assistido. Caso contrário, todos os dados de um download de vídeo completo serão desperdiçados.

preload='metadata'

Essa é a configuração padrão para pré-carregar no Chrome e no Safari. Quando 'metadata' é usado, os primeiros 3% do vídeo são transferidos por download. Embora isso compartilhe ressalvas com 'auto', o download de apenas 3% do vídeo tem um custo de uso de servidor/dados muito menor do que o vídeo inteiro, além de garantir que uma parte do vídeo seja armazenada localmente para inicialização rápida.

preload='none'

Isso economiza a maioria dos dados, mas leva a uma inicialização mais lenta do vídeo quando o botão "Reproduzir" é pressionado, porque, como a configuração indica, zero kilobytes do vídeo são pré-carregados localmente no dispositivo. Para vídeos que estão presentes, mas não são reproduzidos, essa é a configuração adequada. Isso também pode ser usado se o usuário tiver ativado o Modo Lite no navegador.

poster

Você pode ter uma imagem de pôster que aparece sobre a janela de vídeo antes que o vídeo comece a ser reproduzido:

<video src="myVideo.mp4" poster="/image/myVideoImage.jpg">
Um vídeo sem um pôster mostra uma tela preta antes de começar.
Sem imagem do pôster

Um vídeo sem um pôster mostra uma tela preta antes de começar.

Um vídeo com um cartaz é muito mais envolvente.
Com uma imagem de pôster

Um vídeo com um cartaz é muito mais envolvente.

Ao adicionar uma foto em vez de uma caixa preta na página, você torna seu site mais interativo e envolvente. No entanto, o uso do atributo poster adiciona um download de imagem antes do início do download do vídeo. Por esse motivo, evite adicionar um pôster para vídeos que são reproduzidos automaticamente, porque o download adicional vai atrasar o download do vídeo.

Controles de mídia

A adição de um atributo controls adiciona controles de reprodução. Sem elas, os clientes não podem iniciar ou parar o vídeo. Adicione esse recurso aos vídeos para que os usuários possam parar e pausar, mudar o volume e assim por diante. Para vídeos em segundo plano ou em loop, omita esse atributo.

silenciado

O atributo muted faz com que a reprodução comece em um estado de som desativado. Se nenhum controle for fornecido, o som vai permanecer desativado durante toda a reprodução. Se esse for o caso, recomendamos remover a faixa de áudio do vídeo. Isso reduz ainda mais o tamanho do arquivo de vídeo entregue ao cliente.

Assim como com contêineres e codecs, a remoção do arquivo de áudio, também chamada de demuxing, está fora do escopo deste artigo. Confira as instruções na Folha de Atalhos de Manipulação de Mídia.

loop

Para enviar um vídeo que repete o conteúdo (como um GIF animado), adicione o atributo loop. Como os arquivos de vídeo geralmente são muito menores que os GIFs animados, esse mecanismo permite substituir seus GIFs por arquivos de vídeo.

Reprodução automática de vídeo

Se você quiser que o vídeo seja reproduzido imediatamente (por exemplo, como um vídeo em segundo plano ou um vídeo que se repete como um GIF animado), adicione o atributo autoplay:

<video src="myVideo.mp4" playsinline autoplay>

Para que um vídeo seja reproduzido automaticamente em navegadores para dispositivos móveis, o atributo muted também precisa ser adicionado:

<video src="myVideo.mp4" playsinline autoplay muted>

Conclusão

Adicionar um vídeo ao seu site vai criar um novo nível de engajamento para seus clientes, mas é importante que você forneça o conteúdo corretamente, garantindo que a reprodução do vídeo seja perfeita e sem interrupções. Usar os atributos integrados da tag <video> pode ajudar muito a fornecer vídeos perfeitos para todos que visitam seu site.