Normalmente os vídeos são enviados usando a tag de vídeo (embora um método alternativo usando img tenha aparecido , no entanto, seus recursos são limitados). A maneira de implementar o carregamento lento de vídeo depende do caso de uso. Vamos discutir vários cenários, cada um exigindo uma solução diferente.
Para vídeos sem reprodução automática
Para vídeos iniciados pelo usuário (ou seja, vídeos que não são reproduzidos automaticamente), você precisa especificar o atributo apropriado na tag de vídeo :
<video controls preload="none" poster="one-does-not-simply-placeholder.jpg">
<source src="one-does-not-simply.webm" type="video/webm">
<source src="one-does-not-simply.mp4" type="video/mp4">
</video>
No exemplo acima, usa o atributo preload com o valor none , proibindo os navegadores de baixar quaisquer dados de vídeo. O atributo poster define uma imagem de visualização para o vídeo, que ocupará o lugar do vídeo na página até que seja carregado. A necessidade de uma visualização se deve ao fato de que o carregamento do vídeo difere em diferentes navegadores:
- No Chrome, o valor padrão para o atributo preload era auto , mas desde a versão 64, o valor padrão é metadata . Mesmo assim, no Chrome para desktop, uma parte do vídeo pode ser pré-carregada usando o cabeçalho Content-Range. Firefox, Edge e Internet Explorer 11 se comportam de maneira semelhante.
- Chrome, Safari 11.0 . 11.2, , Safari iOS .
- , preload none.
Como o comportamento padrão difere de navegador para navegador em relação ao carregamento automático, provavelmente é melhor definir esse comportamento explicitamente. Nos casos em que o usuário inicia a reprodução por conta própria, usar preload = "none" é a maneira mais fácil de atrasar o carregamento do vídeo em todas as plataformas. O atributo preload não é a única maneira de atrasar o carregamento do conteúdo de vídeo. A reprodução rápida com pré-carregamento de vídeo pode lhe dar algumas idéias e insights sobre como trabalhar com reprodução de vídeo em JavaScript.
Infelizmente, isso é inútil se você quiser usar vídeos em vez de GIFs, falaremos sobre isso a seguir.
Para um vídeo que serve como um substituto de GIF animado
Embora os GIFs animados sejam amplamente usados, eles ficam aquém dos equivalentes de vídeo em muitos aspectos, especialmente no tamanho do arquivo. Os GIFs animados podem ocupar vários megabytes de dados. Vídeos com qualidade visual semelhante geralmente são muito menores.
Usar o elemento de vídeo como substituto de um GIF animado não é fácil. Os GIFs animados têm três características:
- Eles são reproduzidos automaticamente após o download.
- Eles estão continuamente em loop ( embora nem sempre seja o caso ).
- Eles não têm faixa de áudio.
Conseguir isso com uma tag de vídeo é algo assim:
<video autoplay muted loop playsinline>
<source src="one-does-not-simply.webm" type="video/webm">
<source src="one-does-not-simply.mp4" type="video/mp4">
</video>
Os atributos autoplay , muted e loop são autoexplicativos. PlayInline é necessário para reprodução automática no iOS . Agora você tem um substituto de animação de vídeo utilizável. Mas como adicionar carregamento lento aos vídeos? O Chrome não tem problemas com o carregamento lento de vídeo , mas você não pode contar com todos os navegadores para fornecer esse comportamento otimizado. Dependendo do seu público e dos requisitos de aplicação, você pode precisar resolver o problema com suas próprias mãos. Primeiro, vamos mudar a conexão de vídeo:
<video autoplay muted loop playsinline width="610" height="254" poster="one-does-not-simply.jpg">
<source data-src="one-does-not-simply.webm" type="video/webm">
<source data-src="one-does-not-simply.mp4" type="video/mp4">
</video>
Você pode notar a adição de um atributo poster , que permite especificar uma imagem de visualização localizada na página em vez da tag de vídeo até que o vídeo seja carregado lentamente. O URL do vídeo é colocado no atributo data-src de cada elemento de origem .
Usamos JavaScript para organizar o carregamento "lento" usando IntersectionObserver.
document.addEventListener("DOMContentLoaded", function() {
var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));
if ("IntersectionObserver" in window) {
var lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(video) {
if (video.isIntersecting) {
for (var source in video.target.children) {
var videoSource = video.target.children[source];
if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
videoSource.src = videoSource.dataset.src;
}
}
video.target.load();
video.target.classList.remove("lazy");
lazyVideoObserver.unobserve(video.target);
}
});
});
lazyVideos.forEach(function(lazyVideo) {
lazyVideoObserver.observe(lazyVideo);
});
}
});
Percorremos todos os elementos filhos de source e convertemos seus atributos data-src em atributos src . Depois de fazer isso, você precisa começar a carregar o vídeo chamando o método load , após o qual a mídia começará a ser reproduzida automaticamente de acordo com o atributo autoplay .
Usando este método, você obtém uma solução de vídeo pronta que imita o comportamento de um GIF animado, mas não requer o mesmo uso pesado de dados, e você pode carregar esse conteúdo lentamente.
Bibliotecas de carregamento lento
As seguintes bibliotecas podem ajudá-lo com o carregamento lento de vídeos:
- lozad.js é uma versão ultraleve que usa apenas o Intersection Observer. Portanto, é muito eficiente, mas precisará ser polyfilled antes de ser usado em navegadores mais antigos.
- yall.js é uma biblioteca que usa o Intersection Observer e acessa manipuladores de eventos. É compatível com o IE11 e os principais navegadores.
- Se você precisa de uma biblioteca lazyload para React, pode considerar o react-lazyload . Esta biblioteca não usa o Intersection Observer, mas fornece uma maneira de carregar lentamente imagens com a qual os desenvolvedores do React estão familiarizados.
Cada uma dessas bibliotecas é documentada e contém muitos modelos de marcação para várias tarefas de carregamento lento.