$ Array Loop

by nojava

HTML

<div class="buttons">
    <button id='prevButton'>Previous</button>
    <button id='nextButton'>Next</button>
</div>

<div>
  <video  class="myVideo" controls autoplay muted id="myVideo"></video>
  <a id="videotittle" class="videolink" href="" target="_blank"></a>  
</div>

CSS

.myVideo { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: -10000000; 
    background: url("") no-repeat;    
    background-size: cover;   
    display: block; 
}
 

.buttons{
    width: 50%;
    margin: 0 auto; 
}



a.videolink:link, 
a.videolink:visited, 
a.videolink:hover, 
a.videolink:active { 
font-size: 36px;
font-family: Arial, Helvetica, sans-serif;
color: white;
text-transform: uppercase;
mix-blend-mode: difference;
opacity: 1;
text-align: left;
width: 310px;
text-decoration: none;
position: absolute;
bottom: 60px;
left: 60px;
z-index: -10000000;
display:none;
}

JavaScript

var videoSource = [];
videoSource[0] = {tittle:"Bunny", url:'http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/rabbit320.webm'};
videoSource[1] = {tittle:"Loner", url:'http://media.w3.org/2010/05/sintel/trailer.mp4'};
videoSource[2] = {tittle:"Silent Hill", url:'https://vtt.tumblr.com/tumblr_ok41s7Iebh1t4fjz0_480.mp4'};
videoSource[3] = {tittle:"Night", url:'https://vtt.tumblr.com/tumblr_ok44bpZZka1t4fjz0_480.mp4'};
videoSource[4] = {tittle:"Trailer", url:'http://media.w3.org/2010/05/bunny/trailer.mp4'};

var tittleSource = videoSource.map (function(tl) {return tl.tittle;});
var urlSource = videoSource.map (function(ur) {return ur.url;});

var vidIndex = 0, 
	  videoCount = videoSource.length,
    myVideo = document.getElementById("myVideo");
  
document.getElementById('myVideo').addEventListener('ended',nextVideo,false);
document.getElementById('prevButton').addEventListener('click',prevVideo);
document.getElementById('nextButton').addEventListener('click',nextVideo);

play(0);


function play(ind)
{	
	vidIndex = ind % videoCount;
  if(vidIndex < 0) vidIndex += videoCount;
	var v = urlSource[vidIndex];
  myVideo.setAttribute("src",v);
  myVideo.load();
  myVideo.play();

 setTimeout(function() {
 if([0,1,2,3,4].indexOf(vidIndex) != -1){  
    $('#videotittle').html("#" + tittleSource[vidIndex])
    	.attr('href', "https://www.google.com/search?q=" + tittleSource[vidIndex]).stop( true, true )
    	.fadeIn(1000).delay(3000).fadeOut(1000);
  }
   }, 3000);
  
}

function nextVideo(){
  $('#videotittle').hide();
  play(vidIndex + 1);

}

function prevVideo(){
  $('#videotittle').hide();
	play(vidIndex - 1);
}