Javascript 视频结束后暂停并恢复滑动条

我有一个包含视频的滑块，我希望滑块在到达视频幻灯片时暂停，并在视频结束后恢复循环，无需用户交互。我可以让此功能在一个周期内与第一个视频一起使用，但在第二个视频幻灯片上，一旦视频完成，滑块将不会恢复

我有一个控制台日志，当视频完成时会写出来，但一旦第二个视频完成，它就不会说什么。我相信它没有看到的功能发挥光滑滑块

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

---

您仅将第一个

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');
});

JavaScript的等价物是：

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

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

var videos=document.getElementsByTagName（'video'）；
对于（var i=0；iSlickSlider响应迅速，需要360度工作（在所有设备上）。
您的解决方案在移动设备上不起作用，因为禁止自动播放视频

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

更好的解决方案是仅在用户播放视频时暂停旋转木马，然后恢复旋转木马（暂停视频）当检测到幻灯片时。
这也适用于移动设备。只需确保您没有在移动设备上提供视频标签。在通过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);

        }
    });

这将在电视上进行免提播放，因此无需用户输入，也不会在移动设备上显示。不过，感谢您的关注！这有点违背了使用响应式旋转木马的目的，因为它非常有限。您可能需要为电视编写自定义旋转木马，在幻灯片之间暂停视频s、 在屏幕外同时运行多个视频对您来说仍然是一个问题。我已经这样做了，因为幻灯片放映不是交互式的，视频将在下一张幻灯片播放之前完成。没有任何视频会在屏幕外运行。