在 Slick 滑块中暂停/播放视频答案

【问题标题】：Pause/Play video in Slick slider在 Slick 滑块中暂停/播放视频
【发布时间】：2017-06-14 14:05:48
【问题描述】：

我有一个带有一些图像和一些 html5 视频的 Slick 滑块。我已经设法使上一个/下一个箭头起作用：如果我单击箭头，滑块会转到下一个视频（它会自动播放）并且上一个视频会暂停。

现在我添加了一个按钮来暂停/播放当前视频，但我找不到让它正常工作的方法。该按钮仅在第一次播放视频时起作用。如果我更换幻灯片并返回到同一视频，我将无法再暂停它。

$('.sliderVideo').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
fade: true,
dots: true,
autoplay: true,
autoplaySpeed: 1000,
adaptiveHeight: true,
pauseOnHover:false,
cssEase: 'linear'});


$('.sliderVideo').on('beforeChange', function(event, slick, currentSlide, nextSlide){    
  $("video").each(function(){
    $(this).get(0).pause();
  });
});


$('.sliderVideo').on('afterChange', function(event, slick, currentSlide) {
var vid = $(slick.$slides[currentSlide]).find('video');
if (vid.length > 0) {
    $('.sliderVideo').slick('slickPause');
    $(vid).get(0).play();


    var MyPlayButton = $(slick.$slides[currentSlide]).find('.play-button');
    //var MyPlayButton = $('.play-button');

        MyPlayButton.on('click', function () {

        if ($(vid).get(0).paused) {         
            $(vid).get(0).play();
            console.log('play');
        } else {
            $(vid).get(0).pause();
            console.log('paused');
        }
        return false;
    }); 
}   
});

$('video').on('ended',function(){           
$('.sliderVideo').slick('slickPlay');});

非常感谢您的帮助。

我创建了一个小提琴https://jsfiddle.net/8ds3Lrxm/22/

【问题讨论】：

标签： html5-video slick.js

【解决方案1】：

好的，这样解决了：

var MyPlayButton = null;

$('.sliderVideo').on('beforeChange', function(event, slick, currentSlide, nextSlide){

if (null !== MyPlayButton) {
    MyPlayButton.off('click');
}

$("video").each(function(){
    $(this).get(0).pause();
  });

});

【讨论】：

【解决方案2】：

一个非常简单的方法（保持简单是最好的）
这样我们就可以在开始播放时重置视频...

$('#slider_id').on('beforeChange', function(event, slick, currentSlide, nextSlide){

    // pause old video (better performance)
    var old_vid = $('#slider_id .slide:eq('+currentSlide+')').find('video');
    $(old_vid).get(0).pause();


    // play current video from start
    var cur_vid = $('#slider_id .slide:eq('+nextSlide+')').find('video');
    $(cur_vid).get(0).currentTime = 0;
    $(cur_vid).get(0).play();

});

【讨论】：

【解决方案3】：

$('.video_banner_slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  
   console.log(currentSlide);
   $("video").each(function(){
       $(this).get(0).pause();
     });

});

【讨论】：

请不要只发布代码作为答案，还要解释您的代码的作用以及它如何解决问题的问题。带有解释的答案通常更有帮助，质量更高，更有可能吸引投票。