How are those thumbnail preview videos created in players?

Question

Currently websites like Youtube and some others of adult content, play a preview video when we position the computer mouse on some Thumb from a list of videos that is shown to us users. In order to be curious how it is implemented ?

Answer 1

First, Google must have an API that takes some frames from the video and generates a . WEBP, this is a format that just like . GIF tb accepts animations.

See that on a system the size of Youtube probably nothing is done "at hand" is a very large scale, and most likely this API at the time of uploading the video generates this WEBP, as well as the thumbnail video cover. Here I will give just a simple example and a basic explanation.

Ex de API: The https://www.ffmpeg.org/ is a multimedia framework which is capable of capturing part of a video and converting into Gif. On Google you find a series of references how to use Ffmpeg to convert videos to Gif here is a very interesting article with this API https://engineering.giphy.com/how-to-make-gifs-with-ffmpeg/

Webp (pronounced weppy)1 is an image format developed by Google Inc., with the aim of decreasing the size of the files and ensure a faster transfer to those who have an internet slow. Another advantage of this new image format is that it unites what there are better in other formats like: the possibility of compression file (as with JPEG), the possibility to use transparency (as in PNG), and animation support (as in GIF)

Source: https://pt.wikipedia.org/wiki/WebP

See that when doing the :hover in the thumbnail the system executes some script that adds class etc.

This is the link from the "cover":

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

Note that the "image" that appears behind has the extension . webp This is her link

(this image is no longer available on youtube) https://i.ytimg.com/an_webp/Y3yonfhrh7c/mqdefault_6s.webp? du=3000&sqp=Cnec2d0f&rs=Aon4clc4luw7julv5gnjyec46ytom5pp6q

Stackoverflow image indexer does not accept include image . WEBP (see through the link)

---

Practical example

And here is a CSS-only example to illustrate how it can be used. But in the case of Youtube which is a GIANT platform the script works much better!

Here is just an example, can be done in other ways...

.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>

Answer 2

This is a simple codic, where Voce can be used the same function as this one above where you can add an individual gif to post. type this and an idea that can be sure if case Voce have good head with 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';" />