We Keep Coding

Play video in loop with different timing and function

I have 2 function which play the same video but with different timing.
I can't play make the function to work properly.
Looks like the function doesn't reset the other function
I tried to change variables names but still change the timing on click.
var video = document.getElementById('videoElm');
function playShortVideo() {
var starttime = 0; // start at 0 seconds
var endtime = 2; // stop at 2 seconds
video.addEventListener("timeupdate", function() {
if (this.currentTime >= endtime) {
this.currentTime = 0; // change time index here
}
}, false);
video.load();
video.play();
}
function playFullVideo() {
var starttime = 0; // start at 0 seconds
var endtime = 24; // stop at 2 seconds
video.addEventListener("timeupdate", function() {
if (this.currentTime >= endtime) {
this.currentTime = 0; // change time index here
}
}, false);
video.load();
video.play();
}
//play short video by default
playShortVideo();
//CLICK events
var btnshort = $('.shortvideo');
var btnfull = $('.fullvideo');
btnshort.click(function() {
playShortVideo();
});
btnfull.click(function() {
playFullVideo();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<video id="videoElm" autoplay muted controls loop>
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/webm">
</video>
</div>
<button class="shortvideo">play 2 secs only</a><br>
<button class="fullvideo">loop full video</button>

That's because the listener is still there, you need to remove it.
Remember, in order to remove it, you can't use anonymous function as callback so I turned it into defined function.
var video = document.getElementById('videoElm');
const playShort = function() {
if (this.currentTime >= 2) {
this.currentTime = 0; // change time index here
}
};
const playFull = function() {
if (this.currentTime >= 24) {
this.currentTime = 0; // change time index here
}
};
function playShortVideo() {
video.removeEventListener("timeupdate", playFull, false)
video.addEventListener("timeupdate", playShort, false);
video.load();
video.play();
}
function playFullVideo() {
video.removeEventListener("timeupdate", playShort, false)
video.addEventListener("timeupdate", playFull, false);
video.load();
video.play();
}
//play short video by default
playShortVideo();
//CLICK events
var btnshort = $('.shortvideo');
var btnfull = $('.fullvideo');
btnshort.click(function() {
playShortVideo();
});
btnfull.click(function() {
playFullVideo();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<video id="videoElm" autoplay muted controls loop>
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/webm">
</video>
</div>
<button class="shortvideo">play 2 secs only</a><br>
<button class="fullvideo">loop full video</button>
And here is the approach for starting the video at 49 sec (60 > 49 + 10)
const shortStartTime = 49;
const shortDuration = 10;
var video = document.getElementById('videoElm');
const playShort = function() {
if (this.currentTime > (shortStartTime + shortDuration)) {
this.currentTime = shortStartTime; // change time index here
}
};
const playFull = function() {
if (this.currentTime >= 24) {
this.currentTime = 0; // change time index here
}
};
function playShortVideo() {
video.removeEventListener("timeupdate", playFull, false)
video.addEventListener("timeupdate", playShort, false);
video.load();
video.currentTime = shortStartTime;
video.play();
}
function playFullVideo() {
video.removeEventListener("timeupdate", playShort, false)
video.addEventListener("timeupdate", playFull, false);
video.load();
video.play();
}
//play short video by default
playShortVideo();
//CLICK events
var btnshort = $('.shortvideo');
var btnfull = $('.fullvideo');
btnshort.click(function() {
playShortVideo();
});
btnfull.click(function() {
playFullVideo();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<video id="videoElm" autoplay muted controls loop>
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/webm">
</video>
</div>
<button class="shortvideo">play 2 secs only</a><br>
<button class="fullvideo">loop full video</button>

That happens because you're attaching a timeUpdate event listener multiple times.
You either need to use one-only or delete it before attaching a new one.
var video = document.getElementById('videoElm');
var listener;
var starttime = 0;
var endtime = 2;
function updateVideo(e) {
if (e.target.currentTime >= endtime) {
e.target.currentTime = 0; // change time index here
}
}
function playShortVideo() {
starttime = 0; // start at 0 seconds
endtime = 2; // stop at 2 seconds
if (!listener) {
listener = video.addEventListener("timeupdate", updateVideo, false);
}
video.load();
video.play();
}
function playFullVideo() {
starttime = 0; // start at 0 seconds
endtime = 24; // stop at 2 seconds
if (!listener) {
listener = video.addEventListener("timeupdate", updateVideo, false);
}
video.load();
video.play();
}
//play short video by default
playShortVideo();
//CLICK events
var btnshort = $('.shortvideo');
var btnfull = $('.fullvideo');
btnshort.click(function() {
playShortVideo();
});
btnfull.click(function() {
playFullVideo();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<video id="videoElm" autoplay muted controls loop>
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/webm">
</video>
</div>
<button class="shortvideo">play 2 secs only</a><br>
<button class="fullvideo">loop full video</button>

How to play multiple random songs in HTML

So I'd like to have a button in the center of my page to initiate a playlist of randomly selected songs. Once the button is clicked, it should disappear and an audio control window spanning the entire width of the screen should pop up along the bottom of the screen. I've got five mp3 files I'm playing around with. I currently have a start, pause, and resume button, but they're freestanding ugly buttons. Here's a bit of code I have:
<audio id="blue">
<source src="blue.mp3" type="audio/mpeg">
</audio>
<audio id="cigar">
<source src="cigar.mp3" type="audio/mpeg">
</audio>
<audio id="immigrant">
<source src="immigrant.mp3" type="audio/mpeg">
</audio>
<audio id="monkey">
<source src="monkey.mp3" type="audio/mpeg">
</audio>
<audio id="money">
<source src="money.mp3" type="audio/mpeg">
</audio>
<script>
var a1 = document.getElementById("blue");
var a2 = document.getElementById("cigar");
var a3 = document.getElementById("immigrant");
var a4 = document.getElementById("monkey");
var a5 = document.getElementById("money");
var x;
function playAudio() {
var num = Math.floor(Math.random() * 5) + 1;
if(num == 1){
x = a1;
x.play();
}else if(num == 2){
x = a2;
x.play();
}else if(num == 3){
x = a3;
x.play();
}else if(num == 4){
x = a4;
x.play();
}else if(num == 5){
x = a5;
x.play();
}
}
function pauseAudio() {
x.pause();
}
function resumeAudio() {
x.play();
}
</script>
I'm just completely lost as to how I can incorporate all this into something like this:
<audio controls>
<source src="fileName.mp3" type="audio/mpeg">
</audio>
One of the major issues is that I don't know of a way to queue up a song (randomly) and have it play once the previous song ends. I did some Googling but I either couldn't understand what I saw, or it wasn't quite what I need.

How about something like this:
HTML:
<audio id="player" controls></audio>
JavaScript:
const audioSources = ["blue.mp3", "cigar.mp3", "immigrant.mp3", "monkey.mp3", "money.mp3"];
const player = document.getElementById("player");
function playAudio() {
let audioSource = audioSources[Math.floor(Math.random() * audioSources.length)];
player.src = audioSource;
};
player.addEventListener('ended', playAudio);
playAudio(); // start audio playing immediately
Tell me if that works.

Preload mp3 file in queue to avoid any delay in playing the next file in queue

I am working on a script where i am playing multiple mp3 and each files is in queue. There is slight delay in playing next .mp3 file as it takes time to buffer/load the file.
How can i buffer the next .mp3 file which is queue so that all file run smoothly without any delay.
getData(1);
function getData(id) {
//Emty div
$("#surah-wrapper").empty();
$.ajaxSetup({
cache: true,
jsonpCallback: 'quranData'
}); // define ajax setup
// Quran Text Type quran-uthmani | quran-simple | quran-simple-clean | quran-wordbyword
$.getJSON("http://api.globalquran.com/surah/" + id + "/quran-uthmani?key=api_key&jsoncallback=?", {
format: "jsonp"
}, function(data) {
if (id > 1) {
$("<span class='qspan qspan-bsm'>").html("بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ").appendTo("#surah-wrapper");
}
$.each(data.quran, function(i, by) {
$.each(by, function(verseNo, line) {
//$("<p>").html('('+ line.surah+':'+line.ayah+') '+line.verse).appendTo("#surah-wrapper");
$("<span class='qspan' id='" + verseNo + "'>").html(line.verse + '<span class="qspan-ayahno">(' + line.surah + ':' + line.ayah + ')</span>').appendTo("#surah-wrapper");
});
});
});
}
//Play Script & highlight script
var audioIndex = 0;
var countSpan = 0;
countSpan = $('#surah-wrapper').children().length;
var surahNo = 1;
var strCat = "http://download.quranicaudio.com/verses/Sudais/mp3/001001.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001002.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001003.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001004.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001005.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001006.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001007.mp3";
setPlayer();
$('.customSurah').change(function() {
$('.play-btn').css('display', 'none');
$aud.pause();
surahNo = $('#surah option:selected').val();
setTimeout(function() {
countSpan = $('#surah-wrapper').children().length;
var i = 0;
strCat = '';
for (i = 0; i <= countSpan; i++) {
if (i == 0) {
strCat = "http://download.quranicaudio.com/verses/Sudais/mp3/001001.mp3,";
i += 1
}
if (i == countSpan) {
if (surahNo == 1) {
} else {
if (i < 10) {
strCat += "http://download.quranicaudio.com/verses/Sudais/mp3/00" + surahNo + "00" + i + ".mp3,";
}
}
} else {
if (i < 10) {
strCat += "http://download.quranicaudio.com/verses/Sudais/mp3/00" + surahNo + "00" + i + ".mp3,";
}
}
}
if (surahNo == 1) {
strCat = null;
strCat = "http://download.quranicaudio.com/verses/Sudais/mp3/001001.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001002.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001003.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001004.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001005.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001006.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001007.mp3";
}
setPlayer();
$('.play-btn').css('display', 'block');
}, 3000);
});
function setPlayer() {
//reset values
audioIndex = 0;
countSpan = 0;
countSpan = $('#surah-wrapper').children().length;
strCat = strCat.trim();
var audioTracks = strCat;
var audioAddress = audioTracks.split(',');
var playing = false;
$(function() {
$aud = $("#myAudio")[0];
$btn = $(".play-btn");
function setAudio(index) {
$("#surah-wrapper > .qspan").removeClass("qplaying");
$aud.preload = 'auto';
$aud.src = audioAddress[index];
}
setAudio(audioIndex);
$btn.click(function() {
if (playing) {
playing = false;
$aud.pause();
} else
$aud.play();
});
$aud.onended = function() {
if (audioIndex < audioAddress.length - 1) {
audioIndex++;
setAudio(audioIndex);
$aud.play();
} else {
audioIndex = 0;
setAudio(audioIndex);
playing = false;
$btn.text("Play");
}
};
$aud.onpause = function() {
if (!playing) $btn.text("Play");
$(".play-btn").css("background-image", "url(https://cdn0.iconfinder.com/data/icons/cosmo-player/40/button_play_1-64.png)");
};
$aud.onplay = function() {
$btn.text("Pause");
$(".play-btn").css("background-image", "url(https://cdn0.iconfinder.com/data/icons/cosmo-player/40/button_pause_1-64.png)");
playing = true;
$("#surah-wrapper > .qspan:nth-child(" + (audioIndex + 1) + ")").addClass("qplaying");
var wHeight = $(window).height();
var wHalfHeight = wHeight;
var x = $(".qplaying").offset();
var curentSpanPosition = x.top;
wHalfHeight = wHalfHeight / 2;
if (curentSpanPosition > wHalfHeight) {
$('html, body').animate({
scrollTop: curentSpanPosition - 50
}, 1000);
}
};
});
}
.play-btn {
background-image: url("https://cdn0.iconfinder.com/data/icons/cosmo-player/40/button_play_1-64.png");
float: none;
font-size: 0 !important;
height: 50px;
margin: 15px auto;
padding: 5px 10px;
text-align: center;
width: 50px;
}
body{float:right; direction:rtl;}
span{padding:5px 10px; direction:rtl; text-align:right;
margin:5px 1px;
font-size:20px}
.qplaying {
background: #f00 none repeat scroll 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio id="myAudio" >
<source src="" type="audio/mpeg">
</audio>
<div class="play-btn-wrapper">
<select class="customSurah form-control ddCountry styled-select" id="surah" name="surah" onchange="getData($('#surah option:selected').val())"><option value="1">Al-Faatiha</option><option value="2">Al-Baqara</option><option value="3">Aal-i-Imraan</option><option value="4">An-Nisaa</option><option value="5">Al-Maaida</option><option value="6">Al-An'aam</option><option value="7">Al-A'raaf</option><option value="8">Al-Anfaal</option><option value="9">At-Tawba</option><option value="10">Yunus</option><option value="11">Hud</option><option value="12">Yusuf</option><option value="13">Ar-Ra'd</option><option value="14">Ibrahim</option><option value="15">Al-Hijr</option><option value="16">An-Nahl</option><option value="17">Al-Israa</option><option value="18">Al-Kahf</option><option value="19">Maryam</option><option value="20">Taa-Haa</option><option value="21">Al-Anbiyaa</option><option value="22">Al-Hajj</option><option value="23">Al-Muminoon</option><option value="24">An-Noor</option><option value="25">Al-Furqaan</option><option value="26">Ash-Shu'araa</option><option value="27">An-Naml</option><option value="28">Al-Qasas</option><option value="29">Al-Ankaboot</option><option value="30">Ar-Room</option><option value="31">Luqman</option><option value="32">As-Sajda</option><option value="33">Al-Ahzaab</option><option value="34">Saba</option><option value="35">Faatir</option><option value="36">Yaseen</option><option value="37">As-Saaffaat</option><option value="38">Saad</option><option value="39">Az-Zumar</option><option value="40">Al-Ghaafir</option><option value="41">Fussilat</option><option value="42">Ash-Shura</option><option value="43">Az-Zukhruf</option><option value="44">Ad-Dukhaan</option><option value="45">Al-Jaathiya</option><option value="46">Al-Ahqaf</option><option value="47">Muhammad</option><option value="48">Al-Fath</option><option value="49">Al-Hujuraat</option><option value="50">Qaaf</option><option value="51">Adh-Dhaariyat</option><option value="52">At-Tur</option><option value="53">An-Najm</option><option value="54">Al-Qamar</option><option value="55">Ar-Rahmaan</option><option value="56">Al-Waaqia</option><option value="57">Al-Hadid</option><option value="58">Al-Mujaadila</option><option value="59">Al-Hashr</option><option value="60">Al-Mumtahana</option><option value="61">As-Saff</option><option value="62">Al-Jumu'a</option><option value="63">Al-Munaafiqoon</option><option value="64">At-Taghaabun</option><option value="65">At-Talaaq</option><option value="66">At-Tahrim</option><option value="67">Al-Mulk</option><option value="68">Al-Qalam</option><option value="69">Al-Haaqqa</option><option value="70">Al-Ma'aarij</option><option value="71">Nooh</option><option value="72">Al-Jinn</option><option value="73">Al-Muzzammil</option><option value="74">Al-Muddaththir</option><option value="75">Al-Qiyaama</option><option value="76">Al-Insaan</option><option value="77">Al-Mursalaat</option><option value="78">An-Naba</option><option value="79">An-Naazi'aat</option><option value="80">Abasa</option><option value="81">At-Takwir</option><option value="82">Al-Infitaar</option><option value="83">Al-Mutaffifin</option><option value="84">Al-Inshiqaaq</option><option value="85">Al-Burooj</option><option value="86">At-Taariq</option><option value="87">Al-A'laa</option><option value="88">Al-Ghaashiya</option><option value="89">Al-Fajr</option><option value="90">Al-Balad</option><option value="91">Ash-Shams</option><option value="92">Al-Lail</option><option value="93">Ad-Dhuhaa</option><option value="94">Ash-Sharh</option><option value="95">At-Tin</option><option value="96">Al-Alaq</option><option value="97">Al-Qadr</option><option value="98">Al-Bayyina</option><option value="99">Az-Zalzala</option><option value="100">Al-Aadiyaat</option><option value="101">Al-Qaari'a</option><option value="102">At-Takaathur</option><option value="103">Al-Asr</option><option value="104">Al-Humaza</option><option value="105">Al-Fil</option><option value="106">Quraish</option><option value="107">Al-Maa'un</option><option value="108">Al-Kawthar</option><option value="109">Al-Kaafiroon</option><option value="110">An-Nasr</option><option value="111">Al-Masad</option><option value="112">Al-Ikhlaas</option><option value="113">Al-Falaq</option><option value="114">An-Naas</option></select>
<div class="play-btn"></div>
</div>
<div id="surah-wrapper"></div>
THIS IS THE ACTUAL SCRIPT that i want to implement same: I would appreciate solution in context with script mentioned in the fiddle.
http://codepen.io/anon/pen/pRKreo

Here's you go. The biggest challenge I had was handling the value of this within the handler. Set your <audio> elements to preload="none". My script loads the next song as soon as you play one before it and auto-plays next song once first one finishes.
If you're worried about Global Scope just put it in an IIFE. Enjoy!
var files = document.getElementsByTagName('audio');
var songs = [];
var index = 0;
var Song = function(element) {
this.index = index;
this.playing = function(event) {
try {
files[this.index].preload = "auto";
}
catch (e) {
}
};
this.ended = function(event) {
try {
files[this.index].play();
}
catch (e) {
}
};
element.addEventListener('playing', this.playing.bind(this), false);
element.addEventListener('ended', this.ended.bind(this), false); // Trick
};
for (var len = files.length, i = 0; i < len; ++i) {
index++;
songs.push(new Song(files[i]));
}
ul{
list-style: none;
}
<!DOCTYPE html>
<html lang="en">
<meta name="description" content="HTML5 Media Auto Player Skeleton" />
<title>HTML5 Media Auto Player Skeleton</title>
<style>
</style>
</head>
<body>
<main>
<ul>
<li class="album">
<h3 class="album-title">HTML5 Media Player w Auto Next</h3>
</li>
<li>
<audio controls="controls" class="full-width" preload="metadata">
<source src="//rack.international/samples/AttritionDantesKitchenwWHellmixSAMPLE.mp3" type="audio/mpeg">
<source src="//rack.international/samples/AttritionDantesKitchenwWHellmixSAMPLE.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</li>
<li>
<audio controls="controls" class="full-width" preload="metadata">
<source src="//rack.international/samples/AttritionDantesKitchenRascalKlonermxSAMPLE3.mp3" type="audio/mpeg">
<source src="//rack.international/samples/AttritionDantesKitchenRascalKlonermxSAMPLE3.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</li>
<li>
<audio controls="controls" class="full-width" preload="metadata">
<source src="//rack.international/samples/crankRingtone.mp3" type="audio/mpeg">
<source src="//rack.international/samples/crankRingtone.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</li>
</body>
</html>

You can use Promise.all(), Array.prototype.map(), Audio() constructor, canplaythrough event to load all audio first; then use Array.prototype.reduce(), Promise constructor to play audio in sequence at ended event.
var audioAddress = [
"http://download.quranicaudio.com/verses/Sudais/mp3/003001.mp3",
"http://download.quranicaudio.com/verses/Sudais/mp3/003002.mp3",
"http://download.quranicaudio.com/verses/Sudais/mp3/003003.mp3",
"http://download.quranicaudio.com/verses/Sudais/mp3/003004.mp3",
"http://download.quranicaudio.com/verses/Sudais/mp3/003005.mp3",
"http://download.quranicaudio.com/verses/Sudais/mp3/003006.mp3"
];
$("button").click(function() {
Promise.all(audioAddress.map(function(url) {
return new Promise(function(resolve) {
var audio = new Audio(url);
audio.oncanplay = function() {
resolve(audio);
}
})
}))
.then(function(data) {
data.reduce(function(promise, a, index) {
return promise.then(function() {
return new Promise(function(resolve) {
a.onended = resolve;
a.play();
$("p > span").removeClass("playing");
$("p > span:nth-child(" + (index + 1) + ")")
.addClass("playing");
})
})
}, Promise.resolve())
})
});
#myAudio {
display: none;
}
span {
margin: 0px 10px;
}
.playing {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<button>Play Audio</button>
<p>
<span>Verse 1</span>
<span>Verse 2</span>
<span>Verse 3</span>
<span>Verse 4</span>
<span>Verse 5</span>
<span>Verse 6</span>
</p>
You can also create a mix of the sequence of audio tracks to play as a single track Is it possible to mix multiple audio files on top of each other preferably with javascript and use AudioContext.linearRampToValueAtTime Web audio api, stop sound gracefully.

JS and JQuery Audio Volume Does Not Initialize

The Audio player loads and initializes, but the controls disappear once I pass the third song (see >= 3 test). I'm not certain if that's an incredible coincidence but it seems likely I have broken something. Why do the audio controls vanish?
Also, the volume controls do not initialize. Does anyone know why?
<script>
window.onload = function() {
var number = Math.floor((Math.random() * 10) + 1);
if(number >= 3) {
document.getElementById("audio").innerHTML = "<audio id='vid' src='remix.mp3' type='audio/mpeg' autoplay='true' loop='true'></audio>";
} else {
document.getElementById("audio").innerHTML = "<audio id='vid' src='lose.mp3' type='audio/mpeg' autoplay='true' loop='true'></audio>";
}
};
(function(){
var vid = document.getElementById("vid");
vid.volume = 0.2;
});
</script>
<script>
jQuery(function($) {
$("#vid").prop('volume', 0.2);
window.setVolume = function(bgAudio,vol) {
sounds[bgAudio].volume = 0.33;
}
});
</script>
<div id="audio">
</div>

There is no need to replace the whole audio tag. Just change the src attribute:
<audio id='vid' src='remix.mp3' type='audio/mpeg' autoplay='true' loop='true'></audio>
...
$('#vid').attr('src', 'remix.mp3');
EDIT
Your code is a mess, I've tried to refactor it a bit:
(function() {
var number = Math.floor((Math.random() * 10) + 1);
var player = $('#vid');
player.attr('src', number >= 3 ? 'remix.mp3' : 'lose.mp3');
player.prop('volume', '0.2');
player[0].play(); //run the audio track
//not sure about this function
window.setVolume = function(bgAudio, vol) {
sounds[bgAudio].volume = vol;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<audio id='vid' src='' type='audio/mpeg' loop='true'></audio>
And check mp3 file names and location.

calling the next item in my array

right now I have an array of videos. How do I make it so when i click next and prev the next or previous video in the array loads.
<video id="video" controls autoplay width="1000">
<source src="videos/test.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="videos/test.ogv" />
</video>
next
<script>
var vidURL=["videos/test.ogv","videos/test2.ogv","videos/test3.ogv","videos/test4.ogv","videos/test5.ogv" ]; // literal array
function vidSwap(vidURL) {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = vidURL;
myVideo.load();
myVideo.play();
}

Using yout code, it'll be something like this.
What you need to do is have the video that you loaded on a javascript variable.
Then, when you click prev or next you can call a function that will put the correct video number and call it.
<script>
var vidURL=["videos/test.ogv","videos/test2.ogv","videos/test3.ogv","videos"]
var video = 0;
function vidSwap() {
var myVideo = document.getElementsByTagName('video')[video];
myVideo.src = vidURL[video];
myVideo.load();
myVideo.play();
}
function prevVideo() {
if(video == 0) {
video = vidUrl.length;
}
else {
video -= 1;
}
vidSwap();
}
function nextVideo() {
if(video == length) {
video = 0;
}
else {
video += 1;
}
vidSwap();
}
</script>
<video id="video" controls autoplay width="1000">
<source src="videos/test.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="videos/test.ogv" />
</video>
prev
next

Introduce variable which will save current video index, then increment it or decrement it each time you press next/prev
</script>
var i = 0;
<script>
javascript:vidSwap(vidURL[i++])

It looks like you're missing another plus sign in your increment operator.
Try changing
next
To this
next

Wrapped up alternative with wrap-around;
next
prev
...
var Vids = (function() {
var _currentId = -1;
var _urls = ["videos/test.ogv","videos/test2.ogv","videos/test3.ogv","videos/test4.ogv","videos/test5.ogv" ]; // literal array
return {
next: function() {
if (++_currentId >= _urls.length)
_currentId = 0;
return this.play(_currentId);
},
prev: function() {
if (--_currentId < 0)
_currentId = _urls.length - 1;
return this.play(_currentId);
},
play: function(id) {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = _urls[id];
myVideo.load();
myVideo.play();
return false;
}
}
})();