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模板输出幻灯片之前，只需检查用户代理并提供备用图片即可。然后将其用于视频/自动播放/恢复问题：

$('.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);

        }
    });

视频完成后暂停并恢复光滑滑块

3 个答案: