Atualmente sites como o YouTube e alguns outros de conteúdo adulto, reproduzem um vídeo de pré-visualização quando posicionamos o mouse do computador sobre alguma thumb de uma lista de vídeos que é mostrado para nós usuários. Afim de curiosidade como isso é implementado ?
-
Provavelmente um GIF é executado no momento em que o usuário passa o mouse sobre a imagem (hover), uma div é adicionada sobre a thumb com um GIF dentro, basta você inspecionar o youtube que ele mostra mais ou menos como é feito.– Weslei Ferreira da SilvaCommented 4/10/2018 às 19:22
-
Se você apenas adicionar um GIF no modo hover não vai ser possível clicar no botão play pois a imagem vai sobrepor o video.– denisCommented 4/10/2018 às 19:43
-
Ptz eu tinha feito uma resposta completa pra ti... mas fecharam e agora não consigo postar mais...– hugocslCommented 4/10/2018 às 20:17
-
Acho que você pode editar a pergunta e responder não?– denisCommented 4/10/2018 às 20:23
-
@denis o máximo que consigo é votar para reabrir... ai tem que esperar para ver se a comunidade tb vota, precisa de mais 4 votos...– hugocslCommented 4/10/2018 às 21:01
2 Respostas
Primeiramente, O Google deve ter uma API que pega alguns frames do vídeo e gera um .WEBP, esse é um formato que assim como o .GIF tb aceita animações.
Veja que em um sistema do tamanho do Youtube provavelmente nada é feito "na mão" é uma escala muito grande, e muito provavelmente essa API na hora do upload do vídeo gera esse WEBP
, assim como o thumbnail de capa do vídeo. Aqui vou dar apenas uma exemplo simples e uma explicação básica.
Ex de API: O https://www.ffmpeg.org/ é um framework multimedia que é capaz de capturar parte de um vídeo e converter em Gif. No Google vc encontra uma série de referencias como usar o FFMpeg para converter vídeos em Gif aqui tem um artigo bem interessante com essa API https://engineering.giphy.com/how-to-make-gifs-with-ffmpeg/
WebP (pronunciado weppy)1 é um formato de imagem desenvolvida pela Google Inc., com o objetivo de diminuir o tamanho dos arquivos e garantir uma transferência mais rápida para quem possui uma internet lenta. Outra vantagem desse novo formato de imagem é que ele une o que há de melhor em outros formatos como: a possibilidade de compressão do arquivo (como ocorre com o JPEG), a possibilidade de usar transparência (como no PNG), e o suporte a animações (como no GIF)
Fonte: https://pt.wikipedia.org/wiki/WebP
Veja que ao fazer o :hover
na miniatura o sistema executa algum script que adiciona classe etc.
Esse é o link da imagem da "capa":
Veja que a "imagem" que aparece por traz tem a extensão .webp Esse é o link dela
(essa imagem não está mais disponível pelo youtube) https://i.ytimg.com/an_webp/Y3yONFHRH7c/mqdefault_6s.webp?du=3000&sqp=CNec2d0F&rs=AOn4CLC4LUw7juLv5gnJyEC46yTOM5pp6Q
O indexador de imagens do StackOverflow não aceita incluir imagem .WEBP (veja pelo link)
Exemplo prático
E aqui tem um exemplo só com CSS para ilustrar como pode ser usado. Mas no caso do Youtube que é uma plataforma GIGANTE o script funciona muito melhor!
Aqui é só um exemplo, pode ser feito de outras formas...
.wrapper {
width: 246px;
height: 138px;
position: relative;
overflow: hidden;
}
.tumb {
height: 100%;
position: relative;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.anima {
position: absolute;
width: 100%;
height: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-left: auto;
margin-right: auto;
opacity: 0;
}
.anima:hover {
animation: animax 2.5s linear forwards;
}
.anima:hover::after {
content: "";
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(255,0,0,0.5);
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
z-index: 2;
}
@keyframes animax {
0% {
opacity: 1;
}
99% {
opacity: 1;
}
100% {
display: none;
opacity: 0;
}
}
<div class="wrapper">
<a href="https://youtube.com">
<div class="tumb">
<img src="https://i.ytimg.com/vi/Y3yONFHRH7c/hqdefault.jpg?sqp=-oaymwEZCPYBEIoBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLDc7UHONmH5nTT1l37OvFefWKYVNA" alt="">
</div>
<div class="anima">
<!-- a imagem original o youtube removeu -->
<img src="https://thumbs.gfycat.com/ImpassionedWanAltiplanochinchillamouse-size_restricted.gif" alt="">
</div>
</a>
</div>
-
Para sustentar a resposta com um exemplo, cita-se Making GIFs From Video Files With Python. Não testei, mas deve servir pelo menos como base.– WossCommented 10/10/2018 às 13:24
-
@AndersonCarlosWoss bem interessante a referência, muito provavelmente o caminho é por ai.– hugocslCommented 10/10/2018 às 13:29
Este e um codico simples, onde voce pode execulta a mesma função que este ai em cima onde vc pode adiciona um gif individual em post. tipo este e uma ideia que pode da certo se caso voce tenha boa cabeca com html
<img height="190" src="https://1.bp.blogspot.com/-YmXMvW2f_7U/YAmJPAwWlVI/AAAAAAAABhI/hRWxl7wD2ik7E8eUX7zgswQmGjtrv_a3QCNcBGAsYHQ/s770/rastreador-de-moto2-770x515.jpg" width="398" onmouseout="this.src='https://1.bp.blogspot.com/-YmXMvW2f_7U/YAmJPAwWlVI/AAAAAAAABhI/hRWxl7wD2ik7E8eUX7zgswQmGjtrv_a3QCNcBGAsYHQ/s770/rastreador-de-moto2-770x515.jpg';" onmouseover="this.src='https://thumbs.gfycat.com/ImpassionedWanAltiplanochinchillamouse-size_restricted.gif';" />