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.