List of external local videos to play in Loop

(Steve) #1

I’m trying to update an old application I made with Flash however it’s over 10 year old. Need an update.

Trying to find a way of playing external mp4s in the rectangle with innerHTML of

, using javascript.

I need to know how to tell , when a video is ended, then play next video, in list
When end of list and start over with loop for non stop play.

Anyone with an example would be help… thanks!

Possible to replace a video with another video using Javascript?
(Hans-Gerd Claßen) #2

… could be of some help

here the videoevents that will also help. e.g check for ended or timeupdate …

(Steve) #3

Thanks for the speedy reply, and anyone wants to know the answer to this, here is the answer in Jquery (629.6 KB)

(Mark Hunte) #4


When I try your project in Safari or Chrome only the first video plays. The second video loads but does not play.

Two things.

You do not need JQuery to do this. And a better way to load the video is just to set the Attribute rather than over writing the innerHTML, which if my memory serves me right is the problem.

Keeping things in a similar structure of your code you can use the below which works

var myVideo = hypeDocument.getElementById('v1');
	var movieCounter = 0;
	// MovieList array is as many mp4, mov, others.
	var movieList = ["mov1.mp4",
	var vid1 = hypeDocument.getElementById("v1");
		vid1.setAttribute("type", "video/mp4"   )
		vid1.setAttribute("src", "${resourcesFolderName}/" +movieList[movieCounter] );
		myVideo.addEventListener('ended', function(e) {
			movieCounter ++;
			if (movieCounter == (movieList.length)) { movieCounter = 0; }
			vid1.setAttribute("src", "${resourcesFolderName}/" +movieList[movieCounter])

(Steve) #5

After a long night trying to code, I finally got thru it with Safari, I did forget to check with FoxFire and Chrome. All works great now, thanks for that tip!