Advertisement
  1. Web Design
  2. JavaScript

Como "Carregar sob Demanda" Vídeos Embutidos do YouTube

by
Read Time:6 minsLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Hoje, explicaremos como "carregar sob demanda" vários videos embutidos do YouTube. Fazer isso aprimorará a performance do carregamento inicial da sua página, além de ajudar o usuário.

Carregamento sob Demanda

Embutir vídeo do YouTube tornou-se um processo normal para qualquer um envolvido com a web: copiar, colar e pronto. Contudo, trazer um recurso externo como um vídeo do YouTube pode diminuir a performance de carregamento da página, especialmente se há mais de um vídeo embutido nela.

Ao embutir vídeos, não requisitamos só um arquivo de vídeo. Vários recursos são trazidos, incluindo arquivos JavaScript, folha de estilo, imagens e propaganda. E como podemos ver na captura de tela abaixo, dois vídeos do Youtube contém 22 requisições HTTP e 624kb baixados. Esse números aumentarão se adicionarmos mais vídeos à página.

Total HTTP Request report in Google Chrome DevToolTotal HTTP Request report in Google Chrome DevToolTotal HTTP Request report in Google Chrome DevTool
O número total de requisições HTTP ao embutir 2 videos

Assim, ao invés de carregar o vídeo tão logo a página carregue, traremos e inicializaremos o vídeo quando o usuário requisitá-lo. Esse método é conhecido como carregamento sob demanda–ele minimizará o número de requisições HTTP na página inicial, aprimorando a performance da página.

Sem mais delongas, comecemos.

1. Estrutura HTML

Começaremos constrindo o HTML. Isso é bem simples: usaremos apenas dois elementos div. A primeira div envolverá o vídeo embutido do YouTube e a segunda div estará aninhada à primeira, e a usaremos para criar o botão Play, ilustrando que é um vídeo tocável.

Como podemos ver no código acima, adicionaremos um atributo class a esses elementos div e outro data- à primeira, para especificar o ID do vídeo que embutiremos.

2. CSS

Agora, adicionaremos os estilos:

Esses estilos lidam, principalmente, com:

  • A manutenção da proporção (flexível) do vídeo em 16:9, que é a proporção recomendada para um vídeo do YouTube. Fazendo isso, configuramos o padding-top da primeira div em 56.25%. Esse número é derivado da divisão do 9 por 16 e, então, múltiplicado por 100%.
  • Transformar a segunda div em um botão de play e posicioná-la ao centro da primeira div.
  • Posicionar a miniatura do vídeo do Youtube que buscaremos e adicioná-la via JavaScript.

Nesse ponto, começamos ver os elementos div parecidos com os típicos reprodutores de vídeo online:

Bare video player stylesBare video player stylesBare video player styles
Clicar o botão de play não fará o vídeo executar. É uma imagem.

3. JavaScript

Escrevamos um código para buscar a minitura do vídeo, baseado em seu ID, presente no atributo data-embed. Ao final, ele também embutirá e tocará o vídeo após o clique do usuário.

Miniatura

Para começar, selecionaremos os elementos div que envolverão o vídeo embutido, aqueles com a classe youtube.

Como podemos ter dois ou mais vídeos, iteraremos por cada um dos elementos selecionados:

Depois, buscaremos e mostraremos a miniatura do vídeo. O YouTube gera vários tamanhos de imagens, cada um acessível através das seguintes URLs:

  • Qualidade Média: https://img.youtube.com/vi/{video-id}/mqdefault.jpg (320×180 pixels)
  • Alta Qualidade: http://img.youtube.com/vi/G0wGs3useV8/hqdefault.jpg (480×360 pixels)
  • Qualidade Padrão (SD): http://img.youtube.com/vi/G0wGs3useV8/sddefault.jpg (640×480 pixels)
  • Resolução Máxima: http://img.youtube.com/vi/G0wGs3useV8/maxresdefault.jpg (1920×1080 pixels)

Note que precisamos do ID do video em questão para anexar à URL. Especificamos o ID no atributo data e podemos buscá-lo usando a propriedade .dataset do JavaScript.

Como podemos ver no código acima, mostraremos a imagem sddefault.jpg, uma vez que a maioria dos vídeos vem em definição padrão (SD). Sendo uma imagem de 640x480 pixels, a miniatura é do tamanho certo: nem pequena demais nem grande demais. Você pode optar pela miniatura de alta qualidade, maxresdefault.jpg, mas lembre-se que o vídeo nem sempre vem em alta resolução (HD), logo, esse tamanho pode não estar disponível.

Carregando a Miniatura Assíncronamente

Carregar a miniatura assíncronamente permitirá a página carregar mais rápido. Se tivermos dois ou mais vídeos embutidos, cada miniatura desses vídeos será carregada simultaneamente, para que não previnam o fluxo de renderização da página:

Esse código carregará a miniatura a partir da variável source: Uma vez carregada, anexaremo-na à div recipiente.

Youtube image thumbnailYoutube image thumbnailYoutube image thumbnail
Começo da Pause Fest 2016 na Envato. Ainda uma imagem.

Por último, adicionaremos a parte restante do script.

Esse código faz duas coisas:

  • Primeiro, atrela o evento click à div recipiente e também executa a função anônima anexada.
  • Dentro da função, criamos um elemento iframe, semelhante ao que o YouTube gera, exceto que, inseriremos autoplay=1 à URL para tocar o vídeo imediatamente quando o iframe estiver pronto.
  • Por último, substituiremos o conteúdo da div recipente pelo iframe.

Estamos pronto. Pode testar a demo!

Resumindo

Nesse tutorial, aprendemos como carregar vídeos do YouTube sob demanda do usuário. Isso é mais rápido e com consumo de banda mais eficiente que buscar os vídeos junto do carregamento da página, especialmente se tiver muitos vídeos embutidos.

E como podemos ver pela captura de tela, conseguimos um aprimoramento significativo em números de requisições HTTP feitas durante o carregamento inicial. Nesse caso, diminuímos de 22 requisições HTTP para 5!

Chrome HTTP request report in DevToolsChrome HTTP request report in DevToolsChrome HTTP request report in DevTools

Próximo Artigo

No próximo tutorial, aprimoraremos nosso código, tornando-o um "Componente Web". Fazendo isso, permitiremos embutir vídeos do YouTube em uma forma mais elegante através de um elemento customizado. Ao invés de dois elementos div como nesse tutorial, teremos apenas um: <youtube-embed>.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.