Vídeo de carregamento lento

Jeremy Wagner
Rachel Andrew

Assim como nos elementos de imagem, você também pode fazer o carregamento lento de vídeos. Os vídeos normalmente são carregados com o elemento <video> (embora um método alternativo usando <img> tem surgiram com implementação limitada). A forma de carregar <video> lentamente depende do caso de uso. Vamos discutir alguns cenários em que cada um exige solução diferente.

Para vídeos que não são reproduzidos automaticamente

Para vídeos em que a reprodução é iniciada pelo usuário (ou seja, vídeos que não reprodução automática), especificando o elemento preload atributo no elemento <video> pode ser desejável:

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

O exemplo acima usa um atributo preload com um valor de none para impedir que os navegadores do pré-carregamento de quaisquer dados de vídeo. O poster fornece ao elemento <video> um marcador de posição que ocupará o espaço enquanto o vídeo é carregado. A razão para isso é que os comportamentos padrão de carregamento de vídeo podem variar de acordo com o navegador:

  • No Chrome, o padrão para preload era auto, mas a partir do Chrome 64, isso agora é o padrão é metadata. Mesmo assim, na versão para computador do Chrome, uma parte o vídeo pode ser pré-carregado usando o cabeçalho Content-Range. Outros navegadores baseados no Chromium e o Firefox comportam-se de forma semelhante.
  • Assim como no Chrome para computadores, as versões 11.0 para computador do Safari pré-carregam um intervalo do vídeo. A partir da versão 11.2, apenas os metadados do vídeo são pré-carregados. No Safari para iOS, os vídeos nunca são pré-carregado.
  • Quando o modo Economia de dados estiver ativada, preload o padrão é none.

Como o comportamento padrão do navegador em relação a preload não é inflexível, ser explícito provavelmente é a melhor aposta. Nesses casos em que o usuário inicia a reprodução, usar preload="none" é a maneira mais fácil de adiar o carregamento de vídeo em em todas as plataformas. O atributo preload não é a única maneira de adiar o carregamento de conteúdo em vídeo. Reprodução rápida com vídeo O pré-carregamento pode dar algumas ideias e informações sobre como trabalhar com reprodução de vídeo em JavaScript.

Infelizmente, isso não é útil quando se quer usar vídeo no lugar de GIFs animados, que será abordado a seguir.

Para vídeos que substituem GIFs animados

Embora os GIFs animados sejam bastante usados, eles são inferiores aos equivalentes em vídeo há várias formas, especialmente em relação ao tamanho do arquivo. Os GIFs animados podem ter o intervalo de vários megabytes de dados. Vídeos com qualidade visual semelhante tendem a ser muito menor.

Usar o elemento <video> como substituto de um GIF animado não é tão simples como o elemento <img>. Os GIFs animados têm três características:

  1. Eles são reproduzidos automaticamente quando carregados.
  2. Eles se repetem continuamente (embora nem sempre seja o caso).
  3. Eles não têm faixa de áudio.

Conseguir isso com o elemento <video> vai ficar 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. O playsinline é necessário para que a reprodução automática ocorra em iOS. Agora você tem um vídeo como GIF que funciona em várias plataformas. Mas como agir em relação ao carregamento lento? Para começar, modifique a marcação <video> conforme indicado:

<video class="lazy" 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>

Observe o acréscimo do elemento poster atributo, que permite especificar um marcador para ocupar o espaço do elemento <video>. até que o vídeo seja carregado lentamente. Assim como nos exemplos de carregamento lento de <img>, armazenar o URL do vídeo no atributo data-src em cada <source> . A partir daí, use um código JavaScript semelhante ao Exemplos de carregamento lento de imagem com base no Intersection Observer:

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);
    });
  }
});

Quando você faz o carregamento lento de um elemento <video>, é necessário iterar em todos os elementos filhos elementos <source> e invertem os atributos data-src para atributos src. Uma vez Você já fez isso, precisa acionar o carregamento do vídeo chamando o método load do elemento. Depois disso, a mídia começará a ser reproduzida automaticamente. de acordo com o atributo autoplay.

Usando este método, você tem uma solução de vídeo que emula o comportamento de GIFs animados, mas não gera o mesmo uso intensivo de dados que os GIFs animados. e fazer o carregamento lento desse conteúdo.

Bibliotecas de carregamento lento

As seguintes bibliotecas podem ajudar você a fazer o carregamento lento de vídeos:

  • vanilla-lazyload e lozad.js são opções muito leves que usam somente Intersection Observer. Portanto, eles têm alto desempenho, precisarão ser polyfill antes de serem usados em navegadores mais antigos.
  • yall.js é uma biblioteca que usa Intersection Observer e volta para os manipuladores de eventos. Ela também pode fazer o carregamento lento de imagens poster de vídeo usando um atributo data-poster.
  • Se você precisar de uma biblioteca de carregamento lento específica do React, considere usar react-lazyload. Embora não usa Intersection Observer, ele fornece um método familiar de leitura lenta carregando imagens para quem está acostumado a desenvolver aplicativos com React.

Cada uma dessas bibliotecas de carregamento lento é bem documentada, com várias marcações para seus vários esforços de carregamento lento.