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.
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.