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",
"mov2.mp4",
"mov3.mp4"
];
var vid1 = hypeDocument.getElementById("v1");
vid1.setAttribute("type", "video/mp4" )
vid1.setAttribute("src", "${resourcesFolderName}/" +movieList[movieCounter] )
myVideo.play();
myVideo.addEventListener('ended', function(e) {
movieCounter ++;
if (movieCounter == (movieList.length)) { movieCounter = 0; }
vid1.setAttribute("src", "${resourcesFolderName}/" +movieList[movieCounter])
myVideo.play();
});
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!