スライダープラグインFlexSliderを使ってhtml5の<video>タグで出力されている3つの動画をスライドさせているのですが、そのままの状態ですとスライドした時に2番目・3番目の動画が途中から再生されてしまいます(3番目が終わって1番目に再び戻った時は1番目の動画も途中から再生されます)。
おそらくサイト表示させた段階で3つの動画とも同時に再生されてしまうからだと思いますが、スライドが切り替わった時に再生が始まるようにする方法がわかりません(もしくは一つ前の動画再生が終わってから次へスライドする方法)
<video>タグのautoplay属性を外しても動画そのものの再生ができなくなりますし、何か良い方法がございましたらご教授お願いいたします。
HTML
<div class="flexslider flex1”> <li> <video src="video1.mp4" autoplay loop muted></video> </li> <li> <video src="video2.mp4" autoplay loop muted></video> </li> <li> <video src="video3.mp4" autoplay loop muted></video> </li> </div>
jQuery
$(function() { $('.flex1').flexslider({ animation: "fade", video:true, slideshowSpeed: 7000, animationSpeed:800, controlNav:false, start: function (slider) { clearInterval(slider.animatedSlides); slider.animatedSlides = setInterval(slider.animateSlides, 5000); }, after: function (slider) { if (slider.currentSlide == 0) { clearInterval(slider.animatedSlides); slider.animatedSlides = setInterval(slider.animateSlides, 5000); } if (slider.currentSlide == 1) { clearInterval(slider.animatedSlides); slider.animatedSlides = setInterval(slider.animateSlides, 5000); } if (slider.currentSlide == 2) { clearInterval(slider.animatedSlides); slider.animatedSlides = setInterval(slider.animateSlides, 10000); } } }); });
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/10/12 12:59