How to play multiple video using html5

[David_95]

https://www.daniweb.com/digital-media/ui-ux-design/threads/462158/how-to-play-multiple-video-using-html5
How is the back button done.
I have tried a few videos like this
(function prevButton()
myVideo.pause();
myVideo.currentTime=0;
index = index - 1;
if(index==videoList.length)
index = 0;
alert(videoList[index]);
myVideo.src = 'videos/'+videoList[index];
window.currentVideoName=videoList[index];
myVideo.play();
)
but the first video is "Undefined" when you click the button back.

[Traevel]

You're doing a check for when the video index is equal to the length of the video instead of when it's going negative.

index = index - 1;
if(index==videoList.length)
index = 0;

For instance if you have 4 videos, and the current index is 0 the above part will go: if(-1 == 3) and return false, hence index stays -1 and since there's no video with that index it will fail.

Instead you should do (for a back button) a check on a negative index. Depending on what you want to happen: nothing or circle back to the last video you set the index to 0 or videoList.length.

index = index - 1 
if(index<0)
index = videoList.length

[David_95]

Traevel, first thank you very much.
I tried it according to these codes.
But when it is called back at first, it gives the message "Undefined" again.
He works when he click on the button again. But when it comes to the first video, it says "Undefined" again.
I tried this way.

  <video id="videos" width="420">
    <source src="video/trial01.mp4" type="video/mp4">
    <source  type="video/mp3">
    <source type="video/ogg">
    Your browser does not support HTML5 video.
  </video>
  <br>
  <button onclick="prevButton()">Prev</button>
  <button onclick="playPause()">Play/Pause</button> 
  <button onclick="nextButton()">Next</button>
</div>
<script> 
var myVideo=document.getElementById("videos"); 
var videoList=['trial01.mp4','trial02.mp4','trial03.mp4','trial04.mp4'];
var index = videoList.indexOf(window.currentVideoName);
//Next button
function nextButton(){
myVideo.pause();
myVideo.currentTime=0;
index = index + 1;
if(index==videoList.length)
index = 0;
alert(videoList[index]);
myVideo.src = 'video/'+videoList[index];
window.currentVideoName=videoList[index];
myVideo.play();
}
//Prev button
function prevButton(){
myVideo.pause();
myVideo.currentTime=0;
index = index - 1;
if(index<0)
index = videoList.length;
alert(videoList[index]);
myVideo.src = 'video/'+videoList[index];
window.currentVideoName=videoList[index];
myVideo.play();
}
function playPause()
{ 
if (myVideo.paused) 
  myVideo.play(); 
else 
  myVideo.pause(); 
} 
</script>

[Traevel]

Sorry, I messed up in my answer. It should be index = videoList.length - 1 (d'oh!).

If there are four items the first one is videoList[0] and the fourth one is videoList[3].

[David_95]

Thanks Traevel thanks.
"0" value should not be forgotten.
☺I am very laughing on my own. For forgetting "0" value.☺