Jquery random video generator...help!

JavaScript
,
1

Hi, I am trying to make a random video generator that is set on a timer (filled with random times) in jquery… and I’m a bit lost. I was wondering if someone on here could help me?

The problem is that I cannot exit the $(‘video’).on(ended) function … which detects if any of the random videos has ended…

I then need it to loop again, waiting a for a random amount of time specified in my array someNumbers until it plays the next video… and then display a random video and play it. And loop again, and again.
Honestly a while loop is ideal but I just did a for loop for testing purposes.

Here’s some code:

html: (this comment box doesn’t like the brackets around the html.)

<div id="random_show">

<div id="sample_one_div">
<video id="sample_one" src="Futura.mp4"></video>
</div>
<div id="sample_two_div">
<video id="sample_two" src="anime.mp4"></video>
</div>

<div id="sample_three_div">
<video id="sample_three" src="erik.mp4" ></video>
</div>

</div>

jquery:

// JavaScript Document
$(document).ready(function(){

var video_one = $("#sample_one")[0];
var video_two = $("#sample_two")[0];
var video_three = $("#sample_three")[0]; 

    
$('#random_show > div').hide();

var randomDivs = ['sample_one_div', 'sample_two_div', 'sample_three_div'];

var someNumbers = [3000, 1000, 8000];

console.log(someNumbers[real]);

for ( var i=0; i <4; i++ ){
	
	console.log (i);
	
	var num = Math.floor(Math.random() * 3); // Generates a random number for randomDivs every time called
	
	var real = Math.floor(Math.random() * 3); // Generate a random number for someNumbers array every time called

	$('#' + randomDivs[num]).show(); // Shows a random div every time called

   if (video_one.paused && $(video_one).is(":visible") ) { //Plays the video when on the screen
              video_one.play(); 
			  console.log("It's getting to play video one");
			  console.log("playing futura classical red"); 
  			  }
   else if (video_one.play && $(video_one).is(":visible") ) {
	   video_two.pause();
	   video_three.pause();
	   console.log("Video one visible and playing, return, pause the others");
	   return;
   }
    
   
   if (video_two.paused && $(video_two).is(":visible") ) {
                video_two.play(); 
				console.log("It's getting to play video two");
				console.log("playing anime speciemen");
               }
			    else if (video_two.play && $(video_two).is(":visible") ) {
	   video_one.pause();
	   video_three.pause();
	   console.log("Video two visible and playing, return, pause the others");
	   return;
   } 
			   
   if (video_three.paused && $(video_three).is(":visible") ) {
                video_three.play(); 
				console.log("It's getting to play video three"); 
				console.log("playing erik"); 
               }  
    else if (video_three.play && $(video_three).is(":visible") ) {
	   video_two.pause();
	   video_one.pause();
	   console.log("Video three visible and playing, return, pause the others");
	   return;
   }

setTimeout(function(){
$('video').on('ended',function(){
	
	console.log("Goes into ended video function");
	$('#random_show > div').hide();
	setTimeout(someNumber[real]);
	return true;
	console.log("finished playing video");
		
});


}, someNumbers[real]);
console.log("end of for loop");
};////////////////////////////////////////////////////////////////end of for loop


}); //closing doc ready
2

Used the code tag on your markup so it shows properly :wink: (which allows the angle brackets)