Member Avatar for 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.

  • 2 Contributors
  • 4 Replies
  • 418 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by David_95

Dani AI

Generated

Two things caused the "Undefined" you saw: the playlist index was sometimes out of range, and the index was initialized from an undefined global. As spotted, wrapping to videoList.length is off-by-one (the last valid index is videoList.length - 1). In 's snippet the initial line that uses videoList.indexOf(window.currentVideoName) returns -1 when window.currentVideoName is not set, so the very first Prev click tries to read videoList[-1] and shows "Undefined".

A robust pattern is: (1) initialize the index from the actual <video> src (fall back to 0 if not found), and (2) update the index with a safe wrap using modulo. The example below shows a compact, resilient approach — it avoids relying on a global variable and works whether the page started from a <source> tag or an explicit video.src:

var myVideo = document.getElementById('videos');
var videoList = ['trial01.mp4','trial02.mp4','trial03.mp4','trial04.mp4'];

// find current file name from the player, default to first item
var src = myVideo.currentSrc || (myVideo.querySelector('source') && myVideo.querySelector('source').src) || '';
var file = src.substring(src.lastIndexOf('/') + 1);
var index = videoList.indexOf(file);
if (index < 0) index = 0;

// safe wrap: prev / next
index = (index - 1 + videoList.length) % videoList.length; // prev
index = (index + 1) % videoList.length; // next

myVideo.src = 'video/' + videoList[index];
myVideo.load();   // ensure the new source is loaded
myVideo.play();

Troubleshooting checklist: log index and the resolved filename in the console instead of using alerts; ensure server filenames and list entries match exactly (case-sensitive on many hosts); call load() after changing sources; and avoid relying on uninitialized globals like window.currentVideoName unless you explicitly set them on load. These steps will prevent the undefined-item and off‑by‑one issues that came up in the thread.

Recommended Answers

All 4 Replies

Member Avatar for 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
Member Avatar for 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>
Member Avatar for 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].

Member Avatar for David_95

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.