video、imgタグを含めたスライドショーで、動画のみ最後まで再生させたい

bxSliderを使ったスライドショーを作成しています。
スライドのひとつに動画を含めたもので、動画は最後まで再生させ、画像は3秒で切り替えたいです。
恥ずかしながらjavascript初心者でして、どのような記述が必要か、ご教示いただけませんでしょうか。

html
1<div id="slider">
2          <div class="photo"><img src="images/hero-slide00.jpg" alt=""></div>
3          <div class="photo"><img src="images/hero-slide01.jpg" alt=""></div>
4          <div class="photo"><img src="images/hero-slide02.jpg" alt=""></div>
5          <div class="video"><video src="images/top01.mp4"></video></div>
6      </div>

javascript
1   var video = $("#slider video");
2   var photo = $(".photo");
3
4   var slider = $("#slider").bxSlider({
5   infiniteLoop: true,
6   controls: false,
7   pager: false,
8   onSlideAfter: function(elm, oIndex, nIndex){
9   video.get(nIndex).play();
10   }
11   });
12
13   photo.on('setTimeout', function() {
14      slider.goToNextSlide();
15  },3000);
16
17   video.on("ended", function(){
18   slider.goToNextSlide();
19   }).get(0).play();

行動規範の内容に同意します

回答1件

このような感じでしょうか。

html
1<div id="slider">
2	<div class="photo"><img src="images/hero-slide00.jpg" alt=""></div>
3	<div class="photo"><img src="images/hero-slide01.jpg" alt=""></div>
4	<div class="photo"><img src="images/hero-slide02.jpg" alt=""></div>
5	<div class="video"><video src="images/top01.mp4" muted></video></div><!-- 自動再生にはmuted属性が必要 -->
6</div>
7
8
9<script>
10	var timerId = 1;
11	var slider = $("#slider").bxSlider({
12		infiniteLoop: true,
13		controls: false,
14		pager: false,
15		onSliderLoad: after,
16		onSlideAfter: after,
17	});
18
19	function after(nIndex1, x, nIndex2){
20		var index = nIndex2 || nIndex1;
21		var video = $('#slider > div').eq(index+1).find('video')[0];
22		var sec = 3;
23		if(video){ //videoなら
24			video.play();
25			sec = video.duration;
26		}
27		clearTimeout(timerId);//swipeで移動した回は自動移動削除
28		timerId = setTimeout(function(){
29			slider.goToNextSlide();
30		}, sec * 1000);
31	}
32</script>