DestaqueJavaScript

Javascript: Usando addEventListener() para gerar miniaturas de vídeos do YouTube

A ideia do post é gerar miniaturas de vídeos do YouTube.

Segue código completo com comentários para facilitar a compreensão.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Javascript - addEventListener()</title>
</head>
<body>
<div class="youtube" data-embed="H80nCKs9c2k"></div>
<div class="youtube" data-embed="WWZX8RWLxIk"></div>
<div class="youtube" data-embed="wWnBB-mZIvY"></div>
</body>
<script type="text/javascript">
    function redimensiona(i) {
        window.setTimeout(function () {
            var larguraMaxima = 100; // Largura máxima permitida
            var alturaMaxima = 52;    // Altura máxima permitida
            var proporcaoMaxima = alturaMaxima / larguraMaxima;
 
            var larguraImagem = imagens[i].width;    // Largura da imagem
            var alturaImagem = imagens[i].height;  // Altura da imagem
            var proporcaoImagem = alturaImagem / larguraImagem;
 
            if (proporcaoImagem > proporcaoMaxima) {
                proporcao = larguraMaxima / larguraImagem;   // Proporção para dimensionar a imagem
                imagens[i].width = larguraMaxima; // Definindo nova largura
                imagens[i].height = (alturaImagem * proporcao); // Definindo a altura com base na proporção
            }
            else {
                proporcao = alturaMaxima / alturaImagem; // Proporção para dimensionar a imagem
                imagens[i].height = alturaMaxima;   // Definindo nova altura
                imagens[i].width = (larguraImagem * proporcao);  // Definindo a largura com base na proporção
            }
            youtube[i].appendChild(imagens[i]);
        }, 200);
    }
 
    // nodelist
    var youtube = document.querySelectorAll(".youtube");
    // array
    var imagens = [];
    // loop
    for (var j = 0; j < youtube.length; j++) {
        // miniatura do vídeo youtube
        var imagemYoutube = "https://img.youtube.com/vi/" + youtube[j].dataset.embed + "/sddefault.jpg";
        //
        imagens[j] = new Image();
        imagens[j].src = imagemYoutube;
        //
        imagens[j].addEventListener("load", redimensiona(j));
    }
</script>
</html>

Clique aqui para ver uma demonstração.

Qualquer dúvida deixe nos comentários.
Até+

2 thoughts on “Javascript: Usando addEventListener() para gerar miniaturas de vídeos do YouTube

  • Bom dia!
    Como eu faço para criar varias opções de um mesmo vídeo e ao clicar na miniatura escolhida, anexar ela em um input type=file para enviar com o formulario?

    Resposta
    • Fala Luiz,

      A forma como exemplifico traz a imagem padrão do vídeo. Você tem outras formas de trazer as miniaturas, como segue:

      var imagemYoutube = “https://img.youtube.com/vi/” + youtube[j].dataset.embed + “/0.jpg”;
      var imagemYoutube = “https://img.youtube.com/vi/” + youtube[j].dataset.embed + “/1.jpg”;
      var imagemYoutube = “https://img.youtube.com/vi/” + youtube[j].dataset.embed + “/2.jpg”;
      var imagemYoutube = “https://img.youtube.com/vi/” + youtube[j].dataset.embed + “/3.jpg”;

      Para a versão de alta qualidade da miniatura, use uma URL semelhante a esta:
      var imagemYoutube = “https://img.youtube.com/vi/” + youtube[j].dataset.embed + “/hqdefault.jpg”;

      Para a versão de média qualidade:
      var imagemYoutube = “https://img.youtube.com/vi/” + youtube[j].dataset.embed + “/mqdefault.jpg”;

      Para a versão de resolução máxima da miniatura, use uma URL semelhante a esta:
      var imagemYoutube = “https://img.youtube.com/vi/” + youtube[j].dataset.embed + “/maxresdefault.jpg

      Não é permitido setar uma imagem para input file, veja algumas formas neste link https://stackoverflow.com/questions/1696877/how-to-set-a-value-to-a-file-input-in-html.

      Resposta

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *