# Trying to play one random video after another in one screen

**URL:** <https://discourse.processing.org/t/trying-to-play-one-random-video-after-another-in-one-screen/11418>\
**Category:** Libraries\
**Created:** [May 20, 2019, 11:41am UTC](https://discourse.processing.org/t/trying-to-play-one-random-video-after-another-in-one-screen/11418 "2019-05-20T11:41:17Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![pelinkiliboz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pelinkiliboz/32/5278_2.png) [@pelinkiliboz](https://discourse.processing.org/u/pelinkiliboz)\
**Post date:** [May 20, 2019, 11:41am UTC](https://discourse.processing.org/t/trying-to-play-one-random-video-after-another-in-one-screen/11418/1 "2019-05-20T11:41:17Z")

</div>

Hello!

I’m fairly new to programming and for my graduation project I’m trying to create a sketch on p5js that plays one random video after another from an array of videos.  
I can’t seem to figure out the way to play the videos in one screen within the image() function. It seems to not accept the random video as a variable.  
Here is the sketch:  
[https://editor.p5js.org/pelinkiliboz/sketches/fR2roIRaQ](https://editor.p5js.org/pelinkiliboz/sketches/fR2roIRaQ)  
Any help would be much appreciated!

---

<div class="post-metadata">

**Author:** ![Liquid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/liquid/32/4018_2.png) [@Liquid](https://discourse.processing.org/u/Liquid)\
**Post date:** [May 20, 2019, 12:39pm UTC](https://discourse.processing.org/t/trying-to-play-one-random-video-after-another-in-one-screen/11418/2 "2019-05-20T12:39:21Z")

</div>

Can’t open your link…

---

<div class="post-metadata">

**Author:** ![pelinkiliboz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pelinkiliboz/32/5278_2.png) [@pelinkiliboz](https://discourse.processing.org/u/pelinkiliboz)\
**Post date:** [May 20, 2019, 1:50pm UTC](https://discourse.processing.org/t/trying-to-play-one-random-video-after-another-in-one-screen/11418/3 "2019-05-20T13:50:50Z")

</div>

I wonder why, it seems to open for me.  
I’ll add the code here, though you would need the videos to run it.  
And here’s a duplicate, hopefully this one will open:  
[https://editor.p5js.org/pelinkiliboz/sketches/2BLaVfa5J](https://editor.p5js.org/pelinkiliboz/sketches/2BLaVfa5J)

```auto
var vid0;
var vid1;
var vid2;
var videos = [];
var vid = videos[Math.floor(Math.random() * videos.length)];

function preload() {
  
  vid0 = createVideo('vid0.mp4');
  vid0.size(640,480);
  vid1 = createVideo('vid1.mp4');
  vid1.size(640,480);
  vid2 = createVideo('vid2.mp4'); 
  vid2.size(640,480);
} 

function setup() {
  
 createCanvas(640, 480);

}function playNextVideo() {
  
videos = [vid0, vid1, vid2];   
  
  var vid = videos[Math.floor(Math.random() * videos.length)];
  
  vid.play();
  
  vid.onended(function() {
      playNextVideo();
             });  

}                     

function draw() {

  playNextVideo();
  image(vid, 0, 0, 640, 480);

}

```

---

<div class="post-metadata">

**Author:** ![figraham](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/figraham/32/4161_2.png) [@figraham](https://discourse.processing.org/u/figraham)\
**Post date:** [May 21, 2019, 6:43am UTC](https://discourse.processing.org/t/trying-to-play-one-random-video-after-another-in-one-screen/11418/5 "2019-05-21T06:43:25Z")

</div>

I could open it fine and it looks like you’ve got the basic framework in place!

I think you’re problem is in the timing of events. When you say `var vid = videos[Math.floor(Math.random() * videos.length)];` that line will run before preload, setup, and draw. Which means that it can’t find any videos in the videos array so vid will be set to undefined. I can’t say for sure but I think that’s what’s causing your problem.

I would suggest reducing the number of variables you have. There are some times putting the same object in to multiple variables makes sense but I’ve found that it can lead to situations like this where it’s unclear which variables are which things. Hope that makes sense.

Anyways it seems like you only need two variables an array for the videos and one to store a number of which video you’re currently using.

```auto
var videos = [];
var currentVideoIndex; // this could be shorter but want to make it clear

```

Then your preload could look something like:

```auto
function preload() {
  videos = [createVideo('vid0.mp4'), createVideo('vid1.mp4'), createVideo('vid2.mp4')];
}

```

This way you won’t have a bunch of different variables to keep track of and you can think of `videos[0], videos[1], videos[2]` as replacing `vid0, vid1, vid2`.

Remember to set `currentVideoIndex` after preload but before draw (so in setup). Like:

```auto
currentVideoIndex = Math.floor(Math.random() * videos.length);
// or you can use the p5 functions like
currentVideoIndex = floor(random(videos.length));

```

After all that `image(videos[currentVideoIndex], 0, 0, 640, 480);` should work.

There’s one other thing that maybe causing the error. When you use `playNextVideo()` in draw that function is getting called every frame because draw loops forever. This means the video will switch every frame. I would move it into **setup** to avoid this problem.

The last thing that’s unrelated to the code working is that you might notice that all the videos will still show up on the page in addition to the canvas. This is because `createVideo()` actually creates a `<video>` html tag. To hide these you can use [.hide()](https://p5js.org/reference/#/p5.Element/hide) on a video variable. Like:

```auto
videos[0].hide();

```

Hope that helps! Let me know if anything was confusing.

---

<div class="post-metadata">

**Author:** ![pelinkiliboz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pelinkiliboz/32/5278_2.png) [@pelinkiliboz](https://discourse.processing.org/u/pelinkiliboz)\
**Post date:** [May 21, 2019, 9:05pm UTC](https://discourse.processing.org/t/trying-to-play-one-random-video-after-another-in-one-screen/11418/6 "2019-05-21T21:05:43Z")

</div>

Thank you so much for the great explanation!  
It works now! Really appreciate it!

---

<div class="post-metadata">

**Author:** ![pelinkiliboz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pelinkiliboz/32/5278_2.png) [@pelinkiliboz](https://discourse.processing.org/u/pelinkiliboz)\
**Post date:** [August 7, 2020, 5:27pm UTC](https://discourse.processing.org/t/trying-to-play-one-random-video-after-another-in-one-screen/11418/7 "2020-08-07T17:27:52Z")

</div>

Hi again, reviving this topic because I’m coming back to the same project after a year and it still needs some work, which I am in desperate need of help with.

I have a pretty unrefined sketch here, and I am having problems again with which video is chosen to play at what point. I will post a link because you need the videos to make it work:

[https://editor.p5js.org/pelinkiliboz/sketches/6VwoymxxQ](https://editor.p5js.org/pelinkiliboz/sketches/6VwoymxxQ)

Essentially, I am trying to make this movement & music game by using posenet for body recognition (which can take a little while to load) and choosing one video type to play randomly from a group of videos, depending on a certain gesture like hands up or head down.

The videos keep changing without playing through, and the camera view, which is videoView in the code, also keeps interrupting. What I would like is that the video played is chosen from an array of videos, array chosen intentionally depending on body position and video itself chosen randomly in the array, and this happening in a loop without interrupting each other.

I suppose I need to combine things more in a function and just organize better but I just can’t seem to figure it out exactly what to do, so any tips would be much appreciated.

Many thanks to anyone willing to help!

---

<div class="post-metadata">

**Author:** ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)\
**Post date:** [August 12, 2020, 8:24am UTC](https://discourse.processing.org/t/trying-to-play-one-random-video-after-another-in-one-screen/11418/8 "2020-08-12T08:24:13Z")

</div>

Maybe you should narrow down the scope a bit? Implement a much simpler idea first and get that working flawlessly. (Like “change the background color depending on body position.”)

Then, you could work your way up to realize your full vision, using video and audio—one step at a time.

---

<div class="post-metadata">

**Author:** ![pelinkiliboz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pelinkiliboz/32/5278_2.png) [@pelinkiliboz](https://discourse.processing.org/u/pelinkiliboz)\
**Post date:** [August 27, 2020, 8:13am UTC](https://discourse.processing.org/t/trying-to-play-one-random-video-after-another-in-one-screen/11418/9 "2020-08-27T08:13:59Z")

</div>

Hi Sven, thank you for your answer. I feel like that’s what I tried to do in the beginning by assigning body positions to appearing shapes which is what you see in the beginning, though I realize it got a bit too complicated afterwards.