Question

我使用slickJS为每张幻灯片创建一个HTML5视频背景的滑块。这是我的SlickJS初始化代码：

    $homeSlider.slick({
        adaptiveHeight: true,
        arrows: false,
        autoplay: true,
        autoplaySpeed: 4000,
        dots: true,
        fade: false,
        initialSlide: startSlide,
        lazyLoad : 'progressive',
        onBeforeChange: beforeSlickChange
    });

一切正常，但是当我到达幻灯片列表的末尾并尝试转到下一张幻灯片（这会循环回到第一张幻灯片）时，Slick会显示克隆的幻灯片片刻，然后真正的第一张幻灯片。因此，我无法在最后一张和第一张幻灯片之间进行无缝过渡。当我从最后一张幻灯片向前点击第一张幻灯片或从第一张幻灯片向前点击最后一张幻灯片时，会出现虚拟幻灯片（没有视频播放），大约500毫秒左右后，真正的幻灯片取代了视频播放。

我希望发生的是在转换两张幻灯片时视频无缝播放。我尝试在克隆的幻灯片上播放视频，然后从稍后的点播放真正的幻灯片视频，以便当克隆的幻灯片消失时，真正幻灯片的视频将在同一点上，没有明显的变化。但是，克隆幻灯片消失所需的时间似乎不一致。

有没有人能解决这个问题？将滑块更改为淡入而不是滑动可以解决此问题，但我希望保持滑动行为。谢谢！

Answer 1

我设法解决了这个问题。我所做的是在克隆的幻灯片和真实幻灯片上播放视频，然后将真实幻灯片的currentTime属性设置为afterChange事件中克隆幻灯片的属性。代码如下所示：

初始化代码：

$homeSlider.slick({
    adaptiveHeight: true,
    arrows: false,
    autoplay: true,
    autoplaySpeed: 4000,
    dots: true,
    fade: false,
    initialSlide: startSlide,
    lazyLoad : 'progressive',
    onBeforeChange: beforeSlickChange,
    onAfterChange: afterSlickChange
});

onBeforeChange处理程序：

function beforeSlickChange(slick, currentSlide, nextSlide) {
    if(hasVideoBG(currentSlide) === true && isMobile(mobileQuery) === false) {
        getSlideVideoByIndex(currentSlide).currentTime = 0;
        getSlideVideoByIndex(nextSlide).currentTime = 0;
            }
    if(hasVideoBG(nextSlide) === true && isMobile(mobileQuery)=== false) {
        if(nextSlide === 0) {
            $homeSlider.find(".slick-cloned:eq(1) video").get(0).currentTime = 0;
            $homeSlider.find(".slick-cloned:eq(1) video").get(0).play();
                }
        if(nextSlide === (getSliderCount() - 1)) {
            $homeSlider.find(".slick-cloned:eq(0) video").get(0).currentTime = 0;
            $homeSlider.find(".slick-cloned:eq(0) video").get(0).play();
        }
        getSlideVideoByIndex(nextSlide).play();
    }
}

onAfterChange处理程序：

function afterSlickChange(slick, currentSlide) {
    if(currentSlide === 0) {
        var $slideVideo = $homeSlider.find(".slick-cloned:eq(1) video").get(0);
        getSlideByIndex(currentSlide).find("video").get(0).currentTime = $slideVideo.currentTime
    } else if(currentSlide === (getSliderCount - 1)) {
        var $slideVideo = $homeSlider.find(".slick-cloned:eq(0) video").get(0);
        getSlideByIndex(currentSlide).find("video").get(0).currentTime = $slideVideo.currentTime
    }
}

基本上我正在将实际和克隆幻灯片视频的currentTime重置为0并在幻灯片更改之前播放它们。幻灯片更改后，我将实际幻灯片的currentTime属性设置为克隆幻灯片的属性。这使得当克隆的幻灯片消失时，真正的幻灯片同时播放相同的视频，并且过渡是无缝的。

如何处理克隆的幻灯片以在SlickJS中创建无缝的html5视频滑块？

1 个答案: