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

【问题标题】：Pause and resume slick slider once video finishes视频结束后暂停和恢复光滑的滑块
【发布时间】：2015-07-21 18:07:37
【问题描述】：

我有一个包含视频的 slick.js 滑块，我希望滑块在到达视频幻灯片后暂停，并在视频结束且无需用户交互的情况下恢复循环。我可以让此功能在循环中处理第一个视频，但在第二个视频幻灯片上，一旦视频完成，滑块将不会恢复。

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

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

【问题讨论】：

标签： javascript jquery slick.js

【解决方案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

【讨论】：

【解决方案2】：

SlickSlider 响应迅速，需要 360 度全方位工作（在所有设备上）。您的解决方案不适用于移动设备，因为禁止自动播放视频。

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

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

【讨论】：

这将在电视上免提播放，因此无需用户输入，也不会在移动设备上显示。不过感谢您的关心！
有点违背了使用响应式轮播的目的，这是非常受限制的。您可能应该为电视编写一个定制的轮播，它可以在幻灯片之间暂停视频。在屏幕外同时播放多个视频对您来说仍然是个问题。
这个我已经完成了，因为幻灯片不是交互式的，所以视频会在下一张幻灯片播放之前完成。没有任何东西跑出屏幕。

【解决方案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);

        }
    });

【讨论】：