Hi, everyone:
I am having trouble with a javascript and would greatly appreciate any help. The script is supposed to select a random video on page load, then continue to play a video that follows it when it ends. When all the videos have been played, it is supposed to loop back to the beginning. For example: if I have five embedded videos in a playlist—video1, video2, video3, video4 and video5—when a random video gets selected on page load, video2, for instance, it should continue to play video3, video4 and video5, then loop back again to play video1, video2, etc. I only state 5 five videos, but I am planning on adding much more than that.
Only the random video part of the script works. When the video ends, it does not play the next video or loop back to the beginning. I am self taught and am still pretty much a newbie when it comes to javascript, so I have been stuck for almost a month now trying to figure this out. It is probably something very simple that I have missed, but I just cannot see it. Any help would be greatly appreciated. Here is my code:
<script type="text/javascript">
var lastVideo = null;
var selection = null;
var player = document.getElementsByClassName("frame")[0]; // Get video element
var playlist = ["https://www.youtube.com/embed/Nip9X4V0UnU","https://www.youtube.com/embed/_EQVxzkhpJ8",
"https://www.youtube.com/embed/ZeakPcsccyY","https://www.dailymotion.com/embed/video/x36qpcd&queue-enable=false",
"https://www.youtube.com/embed/H3-ZbaEB_Aw"]; // List of videos
player.autoplay=true;
player.addEventListener("ended", getRandomUrl(player)); // Run function when video ends
function getRandomUrl(player){
while(selection == lastVideo){ // Repeat until different video is selected
selection = Math.floor(Math.random() * playlist.length);
}
lastVideo = selection; // Remember last video
player.src = playlist[selection]; // Tell HTML location of new video
}
getRandomUrl(player); // Select initial video
player.play(); // Start video
</script>