视频结束后暂停和恢复光滑的滑块

Question

我有一个包含视频的 slick.js 滑块，我希望滑块在到达视频幻灯片时暂停，并在视频播放完毕而无需用户交互时恢复循环。我可以让这个功能与循环中的第一个视频一起使用，但在第二个视频幻灯片上，一旦视频完成，滑块将不会恢复。

我有一个控制台日志，该日志会在视频播放完毕时写出，但在第二个视频播放完毕后不会显示任何内容。我相信它没有看到播放光滑滑块的功能。

            function myHandler(e) {         
            console.log('Video Complete')
            $('.sliderMain').slick('slickPlay');
        }

Answer 1

您只是将第一个 video 标记绑定到您的 myHandler 函数：

// It only gets the first element
var video = document.getElementsByTagName('video')[0];
video.addEventListener('ended',myHandler,false);

由于您使用的是 jQuery，您可以在视频结束时绑定一个事件：

$('video').on('ended',function(){           
    console.log('Video Complete')
    $('.sliderMain').slick('slickPlay');
});

jQuery demo

JavaScript 等价物是这样的：

var videos = document.getElementsByTagName('video');

for (var i=0; i<videos.length; i++) {
    videos[i].addEventListener('ended',myHandler,false);
}

JavaScript demo

Answer 2

SlickSlider 反应灵敏，需要 360 度（跨所有设备）工作。您的解决方案不适用于移动设备，因为禁止自动播放视频。

此外，此解决方案允许同时播放多个视频，这是次优的。

更好的解决方案是仅在用户播放视频时暂停轮播，并在检测到幻灯片时恢复轮播（暂停视频）。

Answer 3

这也适用于移动设备。请确保您不在移动设备上提供视频标签。在通过 PHP 模板输出幻灯片之前，只需检查用户代理并提供后备图像。然后将其用于您的 video/autoplay/resume 问题：

$('.homepage .hero-slider').on('afterChange', function(event, slick, currentSlide, nextSlide) {
        var $active = $('.slick-slide.slick-current.slick-active');
        var video = $active.find('video');
        if (video.length == 1) {
            var $slickInstance = $(this);
            // play() only works with a valid id as selector :)
            var video = document.getElementById(video.attr('id'));
            video.play();
            $slickInstance.slick('slickPause');
            video.addEventListener('ended', function () {
                $slickInstance.slick('slickPlay');
            }, false);

        }
    });

视频结束后暂停和恢复光滑的滑块

Pause and resume slick slider once video finishes

javascript

jquery

slick.js