Как реализовать видео слайдер?

Question

arab789 @arab789

Как реализовать видео слайдер?

Делаю видео слайдер. Имеется некоторое кол-во видео, я запускаю первое видео, по событию play(первого видео), начинаю загружать второе, по событию ended(первого видео), скрываю div первого, функцией setTimeout запускаю функцию второго , показываю div второго видео и запускаю его. Так для всех видео, последнее запускает первое. Проблема в том, что после n-го кол-ва проигрывания получается такая ошибка: Uncaught RangeError: Maximum call stack size exceeded.

Как избежать ошибки?

$(document).ready(function() {
  		start_video();

  		function start_video(){
		start_video_1();
	}

	function start_video_1 (){
		$("#hed_vid_1").fadeIn('slow');
		$('#bay_emptiness').fadeIn('slow');
		var vid_1 = document.getElementById("video_play_1");
		vid_1.play();
		$("#video_play_1").bind("play", function() {
	      	//Есть ли видео в блоке
	      	if ($('#hed_vid_2').html() == '')
	      	{
	        	$("#hed_vid_2").html('<video id="video_play_2" preload="true" ><source id="2" src="/video/shadow.mp4" type=\'video/mp4; codecs="avc1.42E01E, mp4a.40.2"\' /><source id="2" src="/video/shadow.webm" type=\'video/webm; codecs="vp8, vorbis"\' /><source id="2" src="/video/shadow.ogv" type=\'video/ogg; codecs="theora, vorbis"\' /></video>');
	      	}
    	});

    	$("#video_play_1").bind("ended", function() {
    		$('#hed_vid_1').fadeOut('slow');
			$('#bay_emptiness').fadeOut('slow');
    		timeout_id_1 = setTimeout(start_video_2, 600);
    		
    	});
	}

	function start_video_2 (){
		$('#hed_vid_2').fadeIn('slow');
  		$('#bay_shadow').fadeIn('slow');
  		var vid_2 = document.getElementById("video_play_2");
  		vid_2.play();
  		//Проверка, если видео играет, грузим следующее
  		$("#video_play_2").bind("play", function() {
      	//Есть ли видео в блоке
      		if ($('#hed_vid_3').html() == '')
      		{
      			$("#hed_vid_3").html('<video id="video_play_3" preload="true" ><source id="3" src="/video/moon_baner.mp4" type=\'video/mp4; codecs="avc1.42E01E, mp4a.40.2"\' /><source id="3" src="/video/moon2.webm" type=\'video/webm; codecs="vp8, vorbis"\' /><source id="3" src="/video/moon_baner.ogv" type=\'video/ogg; codecs="theora, vorbis"\' /></video>');
      		}
    	});
  		$("#video_play_2").bind("ended", function() {
  			$('#bay_shadow').fadeOut('slow');
			$('#hed_vid_2').fadeOut('slow');
			setTimeout(start_video, 600);
  		});
	}

	});

<div id="hed_vid_1" style="width:1920px;height:600px;">
      <video id="video_play_1" preload="true" >
            <source id="1" src="/video/the_emptiness.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
            <source id="1" src="/video/the_emptiness.webm" type='video/webm; codecs="vp8, vorbis"' />
            <source id="1" src="/video/the_emptiness.ogv" type='video/ogg; codecs="theora, vorbis"' />
      </video>
</div>
<div id="hed_vid_2" style="display:none;width:1920px;height:600px;"></div>