11

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 ?

5
  • 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. Commented 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.
    – denis
    Commented 4/10/2018 às 19:43
  • Ptz eu tinha feito uma resposta completa pra ti... mas fecharam e agora não consigo postar mais...
    – hugocsl
    Commented 4/10/2018 às 20:17
  • Acho que você pode editar a pergunta e responder não?
    – denis
    Commented 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...
    – hugocsl
    Commented 4/10/2018 às 21:01

2 Respostas 2

15

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.

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

Esse é o link da imagem da "capa":

https://i.ytimg.com/vi/Y3yONFHRH7c/hqdefault.jpg?sqp=-oaymwEZCPYBEIoBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLDc7UHONmH5nTT1l37OvFefWKYVNA

inserir a descrição da imagem aqui

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>

2
  • 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.
    – Woss
    Commented 10/10/2018 às 13:24
  • @AndersonCarlosWoss bem interessante a referência, muito provavelmente o caminho é por ai.
    – hugocsl
    Commented 10/10/2018 às 13:29
-1

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';" />

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .