Как реализовать в callback функции запуск другой функции?

Question

[Степан Пельмегов]

Добрый день. У меня есть следующий код:

$('.bg-video').YTPlayer({
	fitToBackground: true,
	videoId: 'u3ijGqkjmG4',
	pauseOnScroll: true,
	callback: function() {
		videoCallbackEvents();
	}
});
		
var videoCallbackEvents = function() {
	var player = $('.bg-video').data('ytPlayer').player;
			
	player.addEventListener('onStateChange', function() {
		
  });
}

В нем подгружается видео в див с классом .bg-video . Есть функция videoCallbackEvents() , в которой можно управлять параметрами.
У меня есть слайдер на 3 дива (.bg-video1 , bg-video2, .bg-video3), когда слайд активный он обозначается классом active.
Вопрос:
Как сделать, чтобы когда слайд активный, видео работало только на нем (добавить player.playVideo() в addEventListener'е), а в остальных слайдах ставилось на паузу (player.pauseVideo()) .

Промучался уже 7 часов, не знаю как решить. Буду рад любым подсказкам как это реализовать.
Заранее спасибо.

Верстка слайдера.

<div class="carousel-inner" role="listbox">
    <div class="mbr-box mbr-section mbr-section--relative mbr-section--fixed-size mbr-section--bg-adapted item dark center mbr-section--full-height active">

        <div class="bg-video"></div>

        <div class="mbr-box__magnet mbr-box__magnet--center-right mbr-box__magnet--sm-padding mbr-after-navbar">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 col-md-offset-5">
                        <div class="mbr-hero">
                            <h1 class="mbr-hero__text">Slide 1</h1>
                            <p class="mbr-hero__subtext">Lorem</p>
                        </div>
                        <div class="mbr-buttons btn-inverse mbr-buttons--left mbr-buttons--right">
                            <a class="mbr-buttons__btn btn btn-lg btn-danger" href="#">FOR WINDOWS</a> 
                            <a class="mbr-buttons__btn btn btn-lg btn-default" href="#">FOR MAC</a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="mbr-box mbr-section mbr-section--relative mbr-section--fixed-size mbr-section--bg-adapted item dark center mbr-section--full-height">

        <div class="bg-video"></div>

        <div class="mbr-box__magnet mbr-box__magnet--center-left mbr-box__magnet--sm-padding mbr-after-navbar">
            <div class="container">
                <div class="row">
                    <div class=" col-md-6 col-md-offset-1">
                        <div class="mbr-hero">
                            <h1 class="mbr-hero__text">Slide 2</h1>
                            <p class="mbr-hero__subtext">Lorem</p>
                        </div>
                        <div class="mbr-buttons btn-inverse mbr-buttons--left">
                            <a class="mbr-buttons__btn btn btn-lg btn-danger" href="#">FOR WINDOWS</a> 
                            <a class="mbr-buttons__btn btn btn-lg btn-default" href="#">FOR MAC</a></div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

Answer 1

[Константин Громов]

В общих чертах:

$('.slider').on('slideChange', function (slideIndex) {
	$('.video').each(function (videoIndex) {
		var player = $(this).data('player');

		if (slideIndex === videoIndex) {
			player.playVideo();
		} else {
			player.pauseVideo();
		}
	});
});

Comments

[Степан Пельмегов]

Тут встает проблема с отсутствием slideChange и slideIndex. Внутри данного метода ничего не работает.

[Константин Громов]

Степан Пельмегов: Естественно, я же не знаю какой слайдер вы используете. Вам нужно разобраться как подписаться на это событие и откуда брать индекс слайда на который произошло переключение.

[Степан Пельмегов]

Константин Громов: Как я понял используется bootstrap-carousel-swipe.js
ссылка на гитхаб - https://github.com/avinoamr/bootstrap-carousel-swipe
Подскажете как реализовать?

[Константин Громов]

Степан Пельмегов:

$('.slider').on('slide.bs.carousel', function (event) {
	var slideIndex = $(event.relatedTarget).index();

	$('.video').each(function (videoIndex) {
		var player = $(this).data('player');

		if (slideIndex === videoIndex) {
			player.playVideo();
		} else {
			player.pauseVideo();
		}
	});
});

Если есть анимация и нужно выполнять всё по её окончанию используйте эвент 'slid.bs.carousel'.

[Степан Пельмегов]

Константин Громов: все равно не получается подключить, видео вовсе перестает работать. Уже не знаю что делать. Можно с вами связаться как нибудь, по скайпу например, чтобы помогли решить вопрос? Ну и там договорились бы, что и сколько.

[Константин Громов]

Степан Пельмегов: ответил на почту.