# How do i create a program to loop through videos in p5.js

**URL:** <https://discourse.processing.org/t/how-do-i-create-a-program-to-loop-through-videos-in-p5-js/33401>\
**Category:** Libraries\
**Created:** [November 8, 2021, 2:27pm UTC](https://discourse.processing.org/t/how-do-i-create-a-program-to-loop-through-videos-in-p5-js/33401 "2021-11-08T14:27:04Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![iade2021](https://avatars.discourse-cdn.com/v4/letter/i/9e8a1a/32.png) [@iade2021](https://discourse.processing.org/u/iade2021)\
**Post date:** [November 8, 2021, 2:27pm UTC](https://discourse.processing.org/t/how-do-i-create-a-program-to-loop-through-videos-in-p5-js/33401/1 "2021-11-08T14:27:04Z")

</div>

\< I am pretty new to coding, I am trying to apply different seriously.js effects on different arrays of videos, I am not even able to make the program loop through the videos in the array

```
                                                 /> 

```

let vid1= ‘footb1.mp4’;  
let vid2= ‘footb3.mp4’;  
let vid3= ‘futball1.mp4’;  
let vid4 =‘Mfash.mp4’;  
let vid5= ‘fas4.mp4’;  
let vid6 = ‘rfaash1.mp4’;  
let vid7 = ‘futball2.mp4’;  
let vid8 = ‘footb5.mp4’;  
let vid9 = ‘footb4.mp4’;  
let vid10 = ‘fash3.mp4’;  
let vid11 = ‘fas1.mp4’;  
let vid12 = ‘footb2.mp4’;  
a=[];  
a = [vid1,vid2,vid3,vid4,vid5,vid6,vid7,vid8,vid9,vid10,vid11,vid12];

//mmv

b = [];  
b = [vid1,vid2,vid3];

//mav  
c=[];  
c = [vid7,vid8];

//mev  
d = [];  
d = [vid9,vid12];

//wav

e = [];  
e=[vid4,vid5,vid6];

//wev  
f=[];  
f=[vid10,vid11];

let z;let p;  
let q;let w;let r;let y;

function preload(){  
for (var i = 0;i\<a.lenght;i++){  
z= createVideo(a[i]);  
}  
for (var j = 0; j\<b.lenght;j++){  
q= createVideo(b[j]);

}  
for (var k = 0; k\<c.lenght;k++){  
w= createVideo(c[j]);

}  
for (var l = 0; l\<d.lenght;l++){  
r= createVideo(d[l]);

}  
for (var x = 0; x\<e.lenght;x++){  
y= createVideo(e[x]);

}  
for (var t = 0; t\<f.lenght;t++){  
p= createVideo(f[t]);

}

}

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

}

function draw() {  
background(220);  
}

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [November 8, 2021, 7:35pm UTC](https://discourse.processing.org/t/how-do-i-create-a-program-to-loop-through-videos-in-p5-js/33401/2 "2021-11-08T19:35:21Z")

</div>

Hi @iade2021,

Welcome to the forum! 😉

Before answering your question, can you please format your code by using the `</>` button when editing a message on the forum?

Or use backticks:

```javascript  
your code…  
```

Also if your post is p5js related you can change the tags on the thread!

---

<div class="post-metadata">

**Author:** ![iade2021](https://avatars.discourse-cdn.com/v4/letter/i/9e8a1a/32.png) [@iade2021](https://discourse.processing.org/u/iade2021)\
**Post date:** [November 8, 2021, 7:42pm UTC](https://discourse.processing.org/t/how-do-i-create-a-program-to-loop-through-videos-in-p5-js/33401/3 "2021-11-08T19:42:17Z")

</div>

please can you just show me a little sample of how to put it together? sorry, i am really a novice in these things, just starting out

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [November 8, 2021, 7:52pm UTC](https://discourse.processing.org/t/how-do-i-create-a-program-to-loop-through-videos-in-p5-js/33401/4 "2021-11-08T19:52:30Z")

</div>

> [@iade2021](#):
>
> please can you just show me a little sample of how to put it together?

What exactly is not working in your current code? It’s difficult to test if we don’t have the videos so it will be better if you break the problem into sub problems so we can try to solve them.

- Are you able to import a single video and display it on the canvas?
- What about loading multiple videos? What data structure is the most appropriate for that?
- What about switching between those movies when the user press a key? or every X seconds?

---

<div class="post-metadata">

**Author:** ![iade2021](https://avatars.discourse-cdn.com/v4/letter/i/9e8a1a/32.png) [@iade2021](https://discourse.processing.org/u/iade2021)\
**Post date:** [November 8, 2021, 8:14pm UTC](https://discourse.processing.org/t/how-do-i-create-a-program-to-loop-through-videos-in-p5-js/33401/5 "2021-11-08T20:14:10Z")

</div>

thanks a lot, i was trying to stretch my imagination don’t know if it is something feasible, thought of having different arrays of videos, with each array(say[ai] looping through [ai]) playing at a particular keypressed(); and when another key is pressed, a different array of videos play

---

<div class="post-metadata">

**Author:** ![iade2021](https://avatars.discourse-cdn.com/v4/letter/i/9e8a1a/32.png) [@iade2021](https://discourse.processing.org/u/iade2021)\
**Post date:** [November 8, 2021, 8:16pm UTC](https://discourse.processing.org/t/how-do-i-create-a-program-to-loop-through-videos-in-p5-js/33401/6 "2021-11-08T20:16:03Z")

</div>

sorry, it’s funny, i am just starting out, and i am already assuming what i can’t tell if it’s possible

---

<div class="post-metadata">

**Author:** ![iade2021](https://avatars.discourse-cdn.com/v4/letter/i/9e8a1a/32.png) [@iade2021](https://discourse.processing.org/u/iade2021)\
**Post date:** [November 8, 2021, 8:24pm UTC](https://discourse.processing.org/t/how-do-i-create-a-program-to-loop-through-videos-in-p5-js/33401/7 "2021-11-08T20:24:13Z")

</div>

these are some of the links to different patterns i have been trying towards the project

[p5.js Web Editor | seriously copy (p5js.org)](https://editor.p5js.org/ogierpaul/sketches/h6VLVjwyw)

[p5.js Web Editor | Phantom success copy copy (p5js.org)](https://editor.p5js.org/ogierpaul/sketches/EeYFA5Vq_)

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [November 9, 2021, 6:10pm UTC](https://discourse.processing.org/t/how-do-i-create-a-program-to-loop-through-videos-in-p5-js/33401/8 "2021-11-09T18:10:17Z")

</div>

> [@iade2021](#):
>
> thanks a lot, i was trying to stretch my imagination don’t know if it is something feasible, thought of having different arrays of videos, with each array(say[ai] looping through [ai]) playing at a particular keypressed(); and when another key is pressed, a different array of videos play

this is exactly what you need to do!

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [November 9, 2021, 7:11pm UTC](https://discourse.processing.org/t/how-do-i-create-a-program-to-loop-through-videos-in-p5-js/33401/9 "2021-11-09T19:11:04Z")

</div>

This is a cross post from [StackOverflow](https://stackoverflow.com/questions/69878306/how-do-i-create-a-program-to-loop-through-videos-in-p5-js) where I’ve already provided some advice about working with arrays. However, since there are a few more issues in this more extensive version of the code:

```javascript
let vid1 = "footb1.mp4";
let vid2 = "footb3.mp4";
let vid3 = "futball1.mp4";
let vid4 = "Mfash.mp4";
let vid5 = "fas4.mp4";
let vid6 = "rfaash1.mp4";
let vid7 = "futball2.mp4";
let vid8 = "footb5.mp4";
let vid9 = "footb4.mp4";
let vid10 = "fash3.mp4";
let vid11 = "fas1.mp4";
let vid12 = "footb2.mp4";

// REVIEW: You should always declare your new variables with the let keyword (I won't go into details, but it is a good habit
a = []; // Should be: let a = [];
// REVIEW: You don't need to declare "a" as an empty array and then assign it a new value (this array) you can combine this into one statement.
a = [vid1, vid2, vid3, vid4, vid5, vid6, vid7, vid8, vid9, vid10, vid11, vid12];

// REVIEW: ditto above for all of these...
b = [];
b = [vid1, vid2, vid3];

c = [];
c = [vid7, vid8];

d = [];
d = [vid9, vid12];

e = [];
e = [vid4, vid5, vid6];

f = [];
f = [vid10, vid11];

let z;
let p;
let q;
let w;
let r;
let y;

function preload() {
  // REVIEW: typo, a.lenght should be a.length (the h and t were transposed)
  for (var i = 0; i < a.lenght; i++) {
    // REVIEW: this logic doesn't make sense. You are in a loop, so this statement will run multiple times.
    // Each time it runs it will replace the value stored in the variable "z". So at the end of the loop only the
    // last video created will be stored in "z". It would make more sense to declare "z" as an empty array
    // above and then add items to it, either by using the Array.push() function or by using the index
    // operator in an assignment:
    // Option 1: z.push(createVideo(a[i]));
    // Option 2: z[i] = createVideo(a[i]);
    // Note: these both assume let z = []; above
    z = createVideo(a[i]);
  }
  // REVIEW: ditto the above for all of these.
  for (var j = 0; j < b.lenght; j++) {
    q = createVideo(b[j]);
  }
  for (var k = 0; k < c.lenght; k++) {
    w = createVideo(c[j]);
  }
  for (var l = 0; l < d.lenght; l++) {
    r = createVideo(d[l]);
  }
  for (var x = 0; x < e.lenght; x++) {
    y = createVideo(e[x]);
  }
  for (var t = 0; t < f.lenght; t++) {
    p = createVideo(f[t]);
  }
}

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

function draw() {
  background(220);
}

```