Слайдер воспроизводит HTML5 видео после изменения только один раз - PullRequest
Новая
       46

Слайдер воспроизводит HTML5 видео после изменения только один раз

0 голосов
/ 12 марта 2020

У меня есть неиграющий слайдер с изображениями и HTML5 видео. Моя цель - воспроизвести видео, если текущим слайдом является видео.

Если пользователь перемещается к следующему слайду, воспроизводимое в данный момент видео должно быть приостановлено.

Если следующим слайдом является видео, оно должно начать воспроизводиться.

Мой следующий код работает, но только для первого видео в слайдере. Все последующие видео, кажется, игнорируют функцию воспроизведения, хотя журналы консоли правильны. 

    //  PLAY IF FIRST SLIDE IS VIDEO
    $('.bs-swiper').on('init', function(event, slick){
        if ($('.slick-current .bs-item figure').hasClass('bs-video')) {
            $('video.bs-media')[0].play();
            console.log('play if first slide is a video!');
        }
    });

    //  PLAY/PAUSE IF VIDEO
    $('.bs-swiper').on('afterChange', function(event, slick, currentSlide, nextSlide){
        if ($('.slick-current .bs-item figure').hasClass('bs-video')) {
            $('video.bs-media')[0].play();
            console.log('play this video slide!');
        }
    });

    $('.bs-swiper').on('beforeChange', function(event, slick, currentSlide, nextSlide){
        if ($('.slick-current .bs-item figure').hasClass('bs-video')) {
            $('video.bs-media')[0].pause();
            console.log('pause this video slide!');
        }
    });

Поскольку я не javascript -pro, было бы здорово, если бы кто-то мог помочь отрегулировать мой код, чтобы каждый элемент видео в слайдере воспроизводился, если это текущий слайд. Прямо сейчас воспроизводится только первое видео в слайдере. Все остальные видео в слайдере не запускаются, даже если журналы консоли запускаются правильно.

Большое спасибо за вашу помощь заранее!

1 Ответ

0 голосов
/ 13 марта 2020

Я понял, что мне также нужно добавить класс .slick-current к видеообъекту, например, $ ('. Slick-current video.bs-media') [0] .play (); - теперь все видео слайды начинают воспроизводиться, когда они «на виду», и приостанавливаются, когда их нет. Woohoo!

...