2017-06-14 156 views
0

私はいくつかの画像といくつかのhtml5ビデオでSlickスライダーを持っています。 私は前/次の矢印を働かせました。矢印をクリックすると、スライダーは次のビデオ(自動的に再生)に進み、前の矢印は一時停止します。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/

答えて

0

OK、作成しました:

var MyPlayButton = null; 

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

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

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

}); 
関連する問題