Trying to play one random video after another in one screen

p5.js Libraries
1

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
Any help would be much appreciated!

1 Like
2

Can’t open your link…

3

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

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);

}
1 Like
5

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.

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

Then your preload could look something like:

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:

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() on a video variable. Like:

videos[0].hide();

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

1 Like
6

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

7

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

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!

8

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.

9

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.