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

У меня есть слайдер без автоматического воспроизведения с изображениями и видео 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, было бы здорово, если бы кто-нибудь помог настроить мой код, чтобы каждый элемент видео в слайдере воспроизводился, если это текущий слайд. Сейчас воспроизводится только первое видео в слайдере. Все остальные видео в ползунке не запускаются, даже если журналы консоли запускаются правильно.

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