Aprenda as noções básicas de vídeo. Aumente o engajamento.
Você está pensando em adicionar vídeos ao seu site? À medida que os dispositivos e as conexões de rede se tornaram mais rápidos e potentes, você pode ir além das imagens e adicionar vídeos às suas ferramentas de técnicas para criar a Web. Pesquisas mostram que sites com vídeo geram maior engajamento e vendas. Então, mesmo que você ainda não tenha adicionado vídeos aos seus sites, provavelmente será apenas uma questão de tempo até que isso seja feito.
Muito provavelmente, os arquivos de vídeo adicionados ao site serão os maiores
arquivos transferidos por download. Por esse motivo, é extremamente importante garantir
que os arquivos sejam criados para reprodução rápida e estável para todos os seus 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 causar frustração do cliente.
Esta postagem se concentra no uso da tag <video> HTML5 para entregar vídeos e, portanto, não abrangerá o streaming de vídeo.
Então, vamos começar.
A 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ê tem razão. No nível mais alto, isso é tudo o que você precisa para adicionar um vídeo à Web. No entanto, há muitos atributos que você pode adicionar à tag de vídeo para melhorar o layout e a exibição do vídeo.
A tag <target>
Talvez a melhor maneira de melhorar a exibição de vídeos na Web seja otimizar
os arquivos entregues ao 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 é iniciado da parte superior e escolhe o primeiro formato e o codec que pode usar. No mundo do vídeo, o formato de arquivo, geralmente chamado de contêiner, pode ser salvo com diferentes codecs, cada um com atributos diferentes. Saiba mais sobre isso aqui. No exemplo acima, a primeira escolha é o formato WebM (que pode ser codificado com codecs VP8 ou VP9) e tem suporte no momento em que este artigo foi escrito) por 78% dos usuários globais. A segunda escolha é o codec H.265 de mp4, que é compatível com iOS e Macs mais recentes. Esses codecs são mais recentes e têm compressão de dados aprimorada, apresentando a mesma qualidade de vídeo que os formatos mais antigos.
A escolha final da nossa lista é o H.264 mp4, que é compatível com 92% de todos os usuários globais, mas tem um formato mais antigo e, por isso, geralmente é muito maior do que os vídeos WebM ou H.265. Em um exemplo, você pode ver a diferença para 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 entregar melhor seus vídeos. Quando um vídeo menor é transferido por download, a reprodução ocorre mais cedo, e o buffer é preenchido mais rápido. Isso causa menos interrupções durante a reprodução do vídeo. Além disso, a carga do servidor diminui, o que compensa o aumento dos requisitos de armazenamento de vários arquivos de vídeo.
O atributo de pré-carregamento
A reprodução dos vídeos não pode começar até que algum vídeo seja transferido por download e armazenado localmente. Com o atributo de pré-carregamento, você pode controlar a quantidade de vídeo 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 por download, independentemente
de o usuário pressionar ou não reproduzir. Isso permite a reprodução rápida do vídeo, já que o download é
feito localmente antes que o usuário pressione "Reproduzir". Do uso de dados (e perspectiva de carregamento do servidor), isso só deve ser usado quando houver alta probabilidade de 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é-carregamento no Chrome e no Safari. Quando 'metadata'
é usado, os primeiros 3% do vídeo são salvos. Embora isso tenha ressalvas
com o 'auto', o download de apenas 3% do vídeo gera um custo muito menor de uso de servidor/dados
do que o vídeo inteiro, além de garantir que uma parte do vídeo seja
armazenada localmente para agilizar a inicialização do vídeo.
preload='none'
Isso economiza a maior parte dos dados, mas leva à inicialização mais lenta do vídeo quando a reprodução é pressionada, porque, conforme definido na configuração, nenhum kilobyte do vídeo é pré-carregado localmente no dispositivo. Para vídeos presentes, mas improvável que sejam reproduzidos, essa é a configuração apropriada. Isso também poderá ser usado se o usuário tiver ativado o Modo Lite no navegador.
poster
Recomendamos que uma imagem de pôster seja exibida sobre a janela do vídeo antes do início da reprodução:
<video src="myVideo.mp4" poster="/image/myVideoImage.jpg">
Um vídeo sem pôster mostra uma tela preta antes de começar.
Um vídeo com um pôster é muito mais envolvente.
Ao adicionar uma foto em vez de uma caixa preta na página, você torna seu site mais envolvente e interativo. No entanto, usar o atributo poster adiciona um download
da imagem antes que o download do vídeo comece. Por isso,
evite adicionar um pôster para vídeos com reprodução automática, já que o download extra
atrasa o download do vídeo.
Controles de mídia
A adição de um atributo controls adiciona controles de mídia. Sem eles, seus clientes não
podem iniciar ou parar seu vídeo. Adicione isso 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, é recomendável omitir esse atributo.
silenciado
O atributo muted faz com que a reprodução comece sem som. Se nenhum controle
for fornecido, o som dele permanecerá desativado durante toda a reprodução. Se isso é
desejado, remova a faixa de áudio do vídeo. Isso reduz ainda mais o tamanho do arquivo de vídeo que está sendo entregue ao cliente.
Assim como acontece com contêineres e codecs, a remoção do arquivo de áudio, também chamada de desmuxing, também está além do escopo deste artigo. Consulte as instruções na Folha de referência 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 normalmente são muito menores que os GIFs animados, esse
mecanismo permite que você substitua seus GIFs por arquivos
de vídeo.
Vídeo com reprodução automática
Se você quiser que seu vídeo seja reproduzido imediatamente (por exemplo, como um vídeo em segundo plano ou um
vídeo em loop como um GIF animado), adicione o atributo autoplay:
<video src="myVideo.mp4" autoplay>
Sendo assim, para que um vídeo seja reproduzido automaticamente em navegadores para dispositivos móveis, também é necessário adicionar o atributo muted:
<video src="myVideo.mp4" autoplay muted>
Conclusão
A simples adição de um vídeo ao site adiciona um novo âmbito de engajamento para os 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 você a exibir um vídeo impecável a todos que visitam seu site.