FlexSliderでHTML5<video>をスライドと同時に再生させたい(jQuery/JavaScript)

スライダープラグインFlexSliderを使ってhtml5の<video>タグで出力されている3つの動画をスライドさせているのですが、そのままの状態ですとスライドした時に2番目・3番目の動画が途中から再生されてしまいます(3番目が終わって1番目に再び戻った時は1番目の動画も途中から再生されます)。
おそらくサイト表示させた段階で3つの動画とも同時に再生されてしまうからだと思いますが、スライドが切り替わった時に再生が始まるようにする方法がわかりません(もしくは一つ前の動画再生が終わってから次へスライドする方法)
<video>タグのautoplay属性を外しても動画そのものの再生ができなくなりますし、何か良い方法がございましたらご教授お願いいたします。
当方、JavaScript初心者なため、具体的な組み込み方もご教授していただけますと大変助かりますm(_ _ )m

html
1<div class="flexslider flex1”>
2  <li>
3    <video src="video1.mp4" autoplay loop muted></video>
4  </li>
5  <li>
6    <video src="video2.mp4" autoplay loop muted></video>
7  </li>
8    <li>
9    <video src="video3.mp4" autoplay loop muted></video>
10  </li>
11</div>

javascript
1$(function() {
2    $('.flex1').flexslider({
3        animation: "fade",
4        video:true,
5        slideshowSpeed: 7000,
6        animationSpeed:800,
7        controlNav:false  
8       });
9   });

kei344

2017/10/14 04:39

https://teratail.com/questions/96073 この質問と内容が同じです。teratailは質問内容の編集ができるので、変更がある場合は新しい質問をするのではなく編集してください。また、削除されるよう運営に連絡されることをお勧めします。https://teratail.com/contact/input