Как остановить видео, если слайд изменился?

Question

Мне нужно остановить видео при смене слайда.Текущий код реагирует на изменение переменной, но не останавливает видео.Я использую Clappr ^ 0.3.3, Vue-cli ^ 3.5.0 и Swiper ^ 4.5.0.

Я изменяю логическое значение, чтобы использовать его для триггера в плеере:

data: () => ({
    slider_is_move: false,
}),

После запроса:

.then(() => {

    // init slider
    new Swiper('.content__slider', {
        // Note: I removed extra options
        on: {
            slideChange: function () {
                this.slider_is_move = true; // if slide is change

                setTimeout(() => {
                    this.slider_is_move = false; // set the previous value
                }, 1500);
            }
        }
    });


    // init clappr (video player)
    if ( document.querySelector('.content-video') ) {
        for (let i = 0; i < this.project_videos.length; i++) {
            new Clappr.Player({
                source: '/storage/' + this.project_videos[i],
                parentId: '#container_' + (this.project_images.length + i),
                mute: true,
                width: document.querySelector('.content-item').offsetWidth,
                height: document.querySelector('.content-item').offsetHeight,
                events: {
                    onPlay: () => {
                        setInterval(() => {
                            if (this.slider_is_move === true) {
                                this.pause();
                            }
                        }, 1000);
                    }
                }
            });
        }
    }

});

Если я добавлю console.log(), код будет работать как надо, но он не остановит видео.

onPlay: () => {
    setInterval(() => {
        if (this.slider_is_move === true) {
            this.pause();
        }
    }, 1000);
}

Answer 1

Чтобы остановить воспроизведение видео при смене слайда, необходимо добавить в код несколько строк:

добавить имя к объекту

let player_video = new Clappr.Player...

и приостановить его

player_video.pause();

Answer 2

Вы должны watch атрибут data slider_is_move и реагировать на любые изменения в состоянии.

watch: {
    slider_is_move: {
        handler(nowMoving) {
            if (nowMoving) {
                this.pause();
            }
        },
    }
}