Carregamento lento de vídeos do YouTube usando IntersectionObserver e API do YouTube

O problema:

Ao carregar uma página da Web, o navegador precisa baixar e analisar todos os scripts e outros recursos usados ​​pela página antes que ela possa ser totalmente renderizada. Se uma página da Web contiver um grande número de scripts ou se os scripts forem grandes, isso pode causar um atraso no tempo de carregamento da página.

No caso dos scripts da API do YouTube ( base.js , www-embed-player.js e www-widgetapi.js ), eles são arquivos relativamente grandes que precisam ser carregados e analisados ​​pelo navegador antes que a página possa ser totalmente renderizado. Se uma página da Web contiver um grande número de vídeos do YouTube, carregar os scripts da API do YouTube para cada vídeo pode aumentar significativamente o tempo de carregamento da página. Isso pode afetar negativamente a experiência do usuário, pois os usuários podem ter que esperar muito tempo para que a página carregue.

Outro problema com o carregamento dos scripts da API do YouTube é que isso pode aumentar o tamanho geral da página da web, o que pode levar a tempos de carregamento mais longos, especialmente para usuários com conexões de internet mais lentas.

Além disso, os termos de serviço da API do YouTube são rígidos em vídeos de reprodução automática, portanto, siga as diretrizes para evitar problemas.

Para atenuar esses problemas, os desenvolvedores podem usar técnicas como carregamento lento, carregamento assíncrono, cache e carregamento da API somente quando necessário, além de minificar os scripts para reduzir seu tamanho e melhorar o tempo de carregamento da página da web.

Existem algumas maneiras de mitigar esse problema:

1. Carregamento lento: em vez de carregar os scripts da API do YouTube no carregamento da página, você pode usar o carregamento lento usando a IntersectionObserverAPI para detectar quando o elemento de vídeo está na janela de visualização e, em seguida, carregar os scripts da API.
2. Carregamento assíncrono: você também pode usar o asyncatributo na tag de script para carregar os scripts da API do YouTube de forma assíncrona. Isso permite que o navegador continue analisando o restante da página enquanto os scripts são carregados em segundo plano, o que pode melhorar o tempo geral de carregamento da página.
3. Cache: Outra maneira de acelerar o tempo de carregamento do seu site é usar o cache. Ao armazenar em cache os scripts da API do YouTube, o navegador não precisa baixar os mesmos arquivos várias vezes, reduzindo o tempo de carregamento.
4. Carregando a API somente quando necessário: se você estiver usando a API do YouTube apenas em páginas ou seções específicas do seu site, poderá carregar a API somente quando necessário, por exemplo, quando o usuário clicar em um botão ou link específico.
5. Minimizar os scripts: Minificar scripts é um processo de remoção de caracteres desnecessários do código, como espaços em branco, comentários e quebras de linha, para reduzir o tamanho dos arquivos. Isso pode ajudar a acelerar o tempo de carregamento dos scripts.

A IntersectionObserverAPI pode ser usada para carregar vários vídeos do YouTube em uma página da Web, observando cada elemento de vídeo separadamente.

Aqui está um exemplo de como você pode usar a IntersectionObserverAPI para fazer o carregamento lento de vários vídeos do YouTube:

HTML:

<div class="video-container">
  <div class="autoplayer" data-video="video1_id"></div>
  <div class="autoplayer" data-video="video2_id"></div>
  <div class="autoplayer" data-video="video3_id"></div>
</div>

Primeiro, adicione este código para selecionar todos os elementos de vídeo com a classe “autoplayer” e crie um IntersectionObserverque observe cada elemento de vídeo.

// Get all the video elements
var videoElements = document.querySelectorAll('.autoplayer');

// Create the IntersectionObserver
var observer = new IntersectionObserver(onIntersection);

// Start observing each video element
videoElements.forEach(function (videoElement) {
  observer.observe(videoElement);
});

// Callback function for when the video element is in the viewport
function onIntersection(entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      
      // Load the YouTube API scripts
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      
      // Stop observing the video element
      observer.unobserve(entry.target);
    }
  });
}

function onYouTubePlayerAPIReady() {
  var players = document.querySelectorAll('.autoplayer');
  players.forEach(function (element) {
    let videoId = element.dataset.video;

    let player = new YT.Player(element, {
      videoId: videoId,
      playerVars: {
        autoplay: 1,
        showinfo: 0,
        controls: 0,
        loop: 1,
        enablejsapi: 1,
        rel: 0,
        origin: 'https://localhost/',
      },
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });

  });
}

function onPlayerReady(event) {
  event.target.mute();
  event.target.playVideo();
}

function onPlayerStateChange(event) {
  if (event.data === 0) {
    event.target.playVideo();
  }
}

Você também pode adicionar o restante da lógica para a API do youtube e o player de vídeo dentro da função onIntersection e certificar-se de ter o seletor correto para os videoElements e de que não haja duplicatas, pois isso poderia.

Obrigado!