$ Array Loop
HTML
<div class="buttons">
<button id='prevButton'>Previous</button>
<button id='nextButton'>Next</button>
</div>
<div class="vidContainer">
<video class="myVideo" controls autoplay muted id="myVideo">
https://jsfiddle.net/nojava/5vo8cdbr/#run</video>
<div style="position:absolute;right:120px;bottom:150px;">
<a id="videotittle" class="videolink" href="" target="_blank">
</a>
</div>
</div>
CSS
.vidContainer {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
width: 50%;
height: 50%;
z-index: -10000000;
}
.myVideo{
width:100%;
height: 100%;
}
.buttons{
width: 50%;
margin: 0 auto;
}
a.videolink:link,
a.videolink:visited,
a.videolink:hover,
a.videolink:active {
font-size: 50px;
font-family: Arial, Helvetica, sans-serif;
color: white;
text-transform: uppercase;
mix-blend-mode: exclusion;
opacity: 1;
text-align: right;
width: 310px;
text-decoration: none;
}
body {
margin: 0;
background: #000;
}
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();
$('#videotittle').hide();
setTimeout(function() {
if([0,1,2,3].indexOf(vidIndex) != -1){
$('#videotittle').html("#" + tittleSource[vidIndex])
.attr('href', "https://www.google.com/search?q=" + tittleSource[vidIndex])
.fadeIn(1000).delay(6000).fadeOut(1000);
}
}, 1000);
}
function nextVideo(){
play(vidIndex + 1);
}
function prevVideo(){
play(vidIndex - 1);
}