How to add random, continuous video autoplay to existing onClick video event?

Question

OK, I'm a JavaSript newbie, so forgive my ignorance on this. I have an existing onClick event for an image that triggers an auto-looping random video ("player1") from an array by calling two functions:

function setMp4Source01(){
    var videos = [
        "video1",
        "video2",
        "video3",
    ], videos = videos[Math.floor(Math.random() * videos.length)];
    player1.setVideoSource("content/videos/" + videos + ".mp4");
}

and

function play(){
    player1.play();
}

through this

<img src ... onclick="setMp4Source01();play();"/>

So my question: What would be the most elegant way to make this onClick event do what it's already doing AND also make it so that when the first random video ends, another random video is played immediately afterward without any user intervention/interaction, then a third random video after that, and so on?

In other words, I click on this image, and a random video from the videos array starts playing, and then as soon as that video ends, another random video from that same array automatically starts playing (without me having to click the image again), and then another video, etc., indefinitely.

score 0 · Accepted Answer · edited May 23 '17 at 10:28

0

You can observe a video player and use the ended event to call your randomizer function and then play the video after the new source has been set.

player1.addEventListener('ended',nextVideo,false);

function nextVideo() {
    setMp4Source01();
}

There's other ways of detecting a video's end here: Detect when an HTML5 video finishes

EDIT:

To bring all the code together, your JS should look like this:

var videos = ["video1", "video2", "video3"];
var player1 = document.getElementById("myPlayer");

function setMp4Source01() {
    var currentVideoIndex = Math.floor(Math.random() * videos.length);
    var currentVideo = "content/videos/" + videos[currentVideoIndex] + ".mp4";
    player1.src = currentVideo;
    player1.load();
    player1.play();
}
player1.addEventListener('ended', nextVideo, false);

function nextVideo() {
    setMp4Source01();
}

edited May 23 '17 at 10:28

Community

1
1

answered Jul 09 '16 at 10:19

Paul Ghiran

1,233
1
16
29

one issue with this is that the same vid could play twice in a row (or more), which would be janky/annoying. better to shuffle the video list and just pop() off the top... – dandavis Jul 09 '16 at 10:29
Good catch. I've updated my answer, but without using pop since that would mean getting the element at the end of the array and it'd be just another hassle. – Paul Ghiran Jul 09 '16 at 10:45
Just trying not to change his code that much I guess, it would indeed be more efficient though – Paul Ghiran Jul 09 '16 at 11:23
Paul: Thanks, I see where you're going with this, but I'm afraid I'm not sure where to place all this new code. Where does the new nextVideo() function go in relation to the revised SetMp4Source01() and original play() function code? Does the order matter in the ? And/or in the ? Also, I don't quite understand how player1.addEventListener ties into all this, either. Can that just stand alone in the ? Sorry, I need to learn JavaScript! – J. LaMar Jul 09 '16 at 14:41
I've edited the answer to show you how your code should look like. Also, here's a codepen of the code that's working for me: http://codepen.io/pghiran/pen/vKZmra – Paul Ghiran Jul 09 '16 at 15:59
Paul: I really appreciate your help, and the CodePen example is great. So everything is unified now with the SetMp4Source01() function? And I don't need to call the play() function in the anymore, correct? So next iteration: If I have multiple groups of random but unique videos that all feed into the unified player1, can I just copy and rename the SetMp4Source01 function to 02, 03, etc. -- updating the paired videos array to videos2, videos3, etc. -- to make that possible? – J. LaMar Jul 09 '16 at 18:27
Yes you can re use the function as long as you change the videos array in the other functions to their appropriate arrays. You also need to change the video player accordingly. The play function was pretty redundant since it just called the play() method of the player itself. – Paul Ghiran Jul 09 '16 at 19:49
Also, can you please mark this as the answer if it was what you were looking for? – Paul Ghiran Jul 09 '16 at 19:50
Sorry for the delay ... thanks again for your help, Paul (and for the supplemental comments, Dan). – J. LaMar Jul 12 '16 at 11:57

How to add random, continuous video autoplay to existing onClick video event?

1 Answers1