Question

我有一个带有一些图像和一些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/

Answer 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();
  });

});

Answer 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();

});

Answer 3

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

});

在滑动滑块

3 个答案: