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/