Несколько видео с кастомными кнопками плей и пауза на jquery без id

  • Главная
  • БлогIT
  • Несколько видео с кастомными кнопками плей и пауза на jquery без id

jquery

//несколько видео подряд
(function(){
    $(document).ready(function(){
        $('.situation-item .vido-item-play').click(function(){
            $(this).parent().children('.situation-item video').trigger('play');
            $(this).parent().children('.situation-item video').addClass('active');
            $(this).fadeOut();
            $(this).parent().children('.situation-item .vido-item-pause').fadeIn();
        });
        $('.situation-item .vido-item-pause').click(function(){
            $(this).parent().children('.situation-item video').trigger('pause');
            $(this).parent().children('.situation-item video').removeClass('active');
            $(this).fadeOut();
            $(this).parent().children('.situation-item .vido-item-play').fadeIn();
            
            return false;
        });
    });
})();
//несколько видео подряд

HTML

<div class="video-item">
    <div class="title-block">Видео 1</div>
    <div class="miniature">
        <div class="vido-item-play"></div>
        <div class="vido-item-pause"></div>
        <video src="https://danilsmg.ru/wp-content/uploads/2022/11/danilsmg.ru_-_showreel-1080p.mp4"></video>
        <img src="https://krot.info/uploads/posts/2020-02/1580829035_9-p-kadri-iz-filma-boitsovskii-klub-10.jpg" alt="">
    </div>
</div>

LESS

.video-item{
    .miniature{
        height: 300px; 
        margin-bottom: 30px;
        position: relative;
        cursor: pointer;

        @media(max-width: 1600px){
            height: 200px;
        }
        @media(max-width: 1120px){
            height: 150px;
        }
        .vido-item-pause,
        .vido-item-play{
            position: absolute;
            left: 50%;
            margin-left: -25px;
            top: 50%;
            margin-top: -25px;
            width: 50px;
            height: 50px;
            background: @color-1 url('../img/btn-play-white.svg') no-repeat 60% 50%;
            background-size: 20px;
            border-radius: 50%;
            z-index: 2;
            transition: 0.3s all;
        }
        .vido-item-pause{
            left: auto;
            top: auto;
            right: 20px;
            top: 20px;
            margin: 0;
            background: @color-1 url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1' stroke-linecap='butt' stroke-linejoin='arcs'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e ") no-repeat 50% 50%;
            background-size: 30px;
            z-index: 3;
            display: none;
        }

        video{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 1;
            opacity: 0;
            transition: 0.3s all;
        }
        .active{
            opacity: 1;
        }
    }
}
Контакты

Работаем: с ПН по ПТ, с 08:00 до 17:00 (МСК)
Отдыхаем: в СБ и ВС, чтобы быть в тонусе
и реализовывать самые сложные идеи