bxSliderで動画再生後にスライドを表示

トップのカバーに動画を自動再生させたいんです。
→なるなる、それならvideoタグでできますよね。
動画が終わったらスライド画像をいれたいんです。
→おお、、
動画はページ読み込みの最初だけ流して、2周目以降はスライドだけ表示させたいです。
→おおお。。。

boxSliderで動画再生後のスライドを設置されているかたをみつけたので今回はbxSliderを使いました。
bxSliderで動画再生終了後にスライドショーを始める

で、このサイト通り書いたら動画再生後のスライドはできたんですが、
問題は2周目は動画を再生させずに飛ばすっていうところ。
しかし調べてみると、bxSliderにはコールバック関数とかわかりやすくそろっていて、これを使えばいけんじゃないかってことで。
下記完成コードです。

まずhtmlから。

<ul class="bxslider">
	<li><video src="movie.mp4" id="video"></video></li>
	<li><img src="slide01.jpg" alt="スライド1枚目"></li>
	<li><img src="slide02.jpg" alt="スライド2枚目"></li>
	<li><img src="slide03.jpg" alt="スライド3枚目"></li>
</ul>

そしてjs。body閉じタグ直前に。

<script>
jQuery(function() {
	var $video = jQuery('#video').get(0);
	$slider = jQuery('.bxslider').bxSlider({
		infiniteLoop: true,
		mode: 'fade',
		controls: false,
		speed: 2000,
		onSliderLoad : function() { //スライドがロードされたとき動画再生
			$video.play();
		},
		onSlideAfter : function($slideElement, oldIndex, newIndex) { //各スライドの直後
			$video.pause();
			$video.currentTime = 0;
			$slider.startAuto();
		},
		onSlideBefore : function($slideElement, oldIndex, newIndex) {
			if ( oldIndex == 3 ){ //前のスライドが3枚目だったとき
				$slider.goToSlide(1); //スライド1枚目に移動
			}
		}
	});
	$video.addEventListener("play", function() {
		$slider.stopAuto();
	});
	$video.addEventListener("ended", function() {
		$slider.goToNextSlide();
});
});
</script>

wordpressに入れたので、一部$をjQueryに書き換えてます。
onSlideBeforeはスライドの直前に実行されるコールバック関数なので、
前のスライドが3枚目だったとき=スライド0(最初の動画、2周目以降)のとき、0が表示される前に1に移動させています。
参考サイトでは、毎回動画が再生されるようにif(newindex == 0)として再生のための記載がありましたが、
今回はそれも不要だったので削除しました。
最近Swiperにすっかりお世話になってましたがbxSliderも使いやすいですね^^

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


top