Как сделать превью для видео из изображений?

Question

Как сделать превью для видео как на pornhub? При наведении показывается видео в миниатюре.
Сейчас я использую cover изображение которое при нажатии заменяется на iframe в JavaScript.
В iframe находится видео.
Я хочу добавить что-бы при наведении :hover показывалось как-бы урезанная часть того видео.
Я поглядел они используют около 16 изображений этого видео и как-бы запускают их как слайдер.
Может кто-то знает как это реализовано?
Я не хочу придумывать велосипед :) и пытаться привязывать слайдер из превьюшек для видео на :hover.

Если интересно посмотреть кому-то как я повесил cover изображение на видео.
CodePen

HTML

   <header class="header">
        <div class="wrapper">
            <div class="video_box">
                <div class="cover_img"></div>
                <a class="play-link">
                    <div class="play-icon">
                        <svg fill-opacity=".8" width="50" height="50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                            <path fill="white" d="M371.7 238l-176-107c-15.8-8.8-35.7 2.5-35.7 21v208c0 18.4 19.8 29.8 35.7 21l176-101c16.4-9.1 16.4-32.8 0-42zM504 256C504 119 393 8 256 8S8 119 8 256s111 248 248 248 248-111 248-248zm-448 0c0-110.5 89.5-200 200-200s200 89.5 200 200-89.5 200-200 200S56 366.5 56 256z">
                            </path>
                        </svg>
                    </div>
                </a>
            </div>
        </div>
    </header>

CSS

.header {
    display: flex;
    justify-content: center;
}

.iframe {
    width: 100%;
    height: 540px;
}

.wrapper {
    width: 100%;
    max-width: 960px;
    height: 540px;
    background-color: #000;
    box-shadow: 0 0 4px 1px #000;
}

.video_box {
    position: relative;
    height: 100%;
}

.cover_img {
    background-image: url(http://img.youtube.com/vi/736fiBMtADg/0.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
}

.play-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

.play-icon {
    width: 50px;
    height: 50px;
    transition: all ease-in-out .2s;
    svg {
        path {
            stroke: #ff8562;
            stroke-width: 10px;
            fill: #ffffff;
        }
    }
    &:hover {
        transform: scale(1.4);
    }
}

JS

const videoBtn = document.querySelector('.play-link');
const videoBox = document.querySelector('.video_box');

videoBtn.addEventListener('click', playVideo);

function playVideo() {
    const iframe = document.createElement('iframe');
    iframe.className = 'iframe';
    iframe.src = 'https://www.youtube.com/embed/736fiBMtADg?autoplay=1';
    videoBox.replaceWith(iframe); 
};

Должен сказать, что я нашёл этот репозеторий
Удобный метод (или объект Video) для получения метаданных и эскизов видео Blob в формате HTML5.
Но это наверное не то, что мне нужно. По крайней мере оно получает кадры из видео но не более.

БЛОГ НА HUSL

Как сделать превью для видео из изображений?

Ответы (0 шт):