kdcsライブラリー

slickスライダーに動画（mp4）を含めてスライドさせる。

1. 動画は1番目に配置し、再生中はスライドを止める。
2. 動画の再生が終了したら自動スライド開始。
3. 画像スライド中に動画を巻き戻す。（動画の先頭から再生させるため）

以下、javascriptのスライダーオプション記述
オプション設定ではautoplay:falseにしておく

//slick メインスライダーオプション -------------------------
    var theVideo = document.getElementById('theVideo');

    $('.slick-box').on('init', function(event, slick, currentSlide){
	    theVideo.play();
});

$(function() {
	$('.slick-box').slick({
		infinite: true,
		dots: false,
		arrows: true,
		prevArrow: '<button type="button" class="slick-prev"><</button>',
		nextArrow: '<button type="button" class="slick-next">></button>',
		slidesToShow: 1,
		slidesToScroll: 1,
		adaptiveHeight: false,
		autoplay: false,
		fade: true,
		speed: 2000,
		autoplaySpeed: 7000,
        pauseOnFocus: false
	});

    document.getElementById('theVideo').addEventListener('ended',myHandler,false);

        function myHandler(e) {
            $('.slick-box').slick('slickGoTo',1);
			$('.slick-box').slick('slickPlay');
		}

    $('.slick-box').on('afterChange', function(event, slick, currentSlide){

	    if (currentSlide == 0) {
		    $('.slick-box').slick('slickPause');
			theVideo.play();
        } else {
            theVideo.pause();
            theVideo.currentTime = 0;
		}
    });
});

videoタグには「playsinline muted」を記述。（autoplayは含めない）

html5

<?php /* slickスライダーここから---------------------------------------------------------- */ ?>
<div id="slickSlider">
<div class="slick-box">
<div id="slider-1" class="slider-item">
<div class="caption inner">
<div class="catch">動画キャッチタイトル</div>
<div class="catch2">キャッチコピー1行目<br>キャッチコピー2行目</div>
</div><!--/.caption-->
<video id="theVideo" playsinline muted>
<source src="<?php echo get_template_directory_uri(); ?>/images/slick/movie2.mp4">
</video>
</div><!--/#slider-1-->
<div id="slider-2" class="slider-item">
<img class="slickImage2" src="<?php echo get_template_directory_uri(); ?>/images/slick/slick_img03.jpg" alt="画像２" title="">
<div class="caption inner">
<div class="catch">画像1キャッチタイトル</div>
<div class="catch3">キャッチコピー</div>
</div><!--/.caption-->
</div><!--/#slider-2-->
</div><!--/.slick-box-->
<div class="slickslider-filters"></div>
</div><!--/#slickSlider-->
<?php /* slickスライダーここまで---------------------------------------------------------- */ ?>