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

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

您应该 watch data 属性 slider_is_move，并对状态的任何变化做出反应。

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

Answer 2

要让换幻灯片时视频停止，需要在代码中添加几行：

为对象添加名称

let player_video = new Clappr.Player...

然后暂停

player_video.pause();

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

How to stop the video if the slide has changed?

swiper

vue.js

clappr