How to stop the video if the slide has changed?

Question

I need to stop the video when the slide is changed. The current code reacts to changing the variable, but does not stop the video. I use Clappr ^0.3.3, Vue-cli ^3.5.0 and Swiper ^4.5.0.

I change the boolean value to use it for the trigger in the player:

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

After request:

.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);
                    }
                }
            });
        }
    }

});

If I add a console.log(), the code will work as it should, but it will not stop the video.

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

Answer 1

To make the video stop when you change the slide, you need to add a few lines in the code:

add name to object

let player_video = new Clappr.Player...

and pause it

player_video.pause();

Answer 2

You should watch the data attribute slider_is_move, and react to any changes in the state.

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