如果幻灯片已更改，如何停止视频？

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 attribute slider_is_move，并对状态中的任何更改做出反应。

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