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();

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

2 个答案: