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é+
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?
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.