# Loading multiple videos, fails/works randomly

**URL:** <https://discourse.processing.org/t/loading-multiple-videos-fails-works-randomly/27555>\
**Category:** Coding Questions\
**Created:** [February 2, 2021, 7:42pm UTC](https://discourse.processing.org/t/loading-multiple-videos-fails-works-randomly/27555 "2021-02-02T19:42:28Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![sandersturing](https://avatars.discourse-cdn.com/v4/letter/s/8edcca/32.png) [@sandersturing](https://discourse.processing.org/u/sandersturing)\
**Post date:** [February 2, 2021, 7:42pm UTC](https://discourse.processing.org/t/loading-multiple-videos-fails-works-randomly/27555/1 "2021-02-02T19:42:28Z")

</div>

Hello all,

I really can’t figure out the right way of loading multiple videos (really small in filesize: \< 200kb) and play them. I’m currently loading a couple in an array and playing them randomly in a grid.

The thing is, I load them in preload. Then when I display them using something like `image(videos[i], x, y, gridsize, gridsize)` it’s a bit of a gamble if it works or not. I reload the page, nothing. I reload the page, nothing. I reload the page: BOOM! They play.

The error I got in the console is this: `Uncaught (in promise) TypeError: Cannot read property 'src' of undefined`. Weird thing is that it looks like it fails most of the time when I’ve updated the code and do a reload. But I also get sessions where I can keep reloading and they will display every time. It’s really unreliable.

The method I’m using now is this (not the full code, but the important parts):

```auto
let tilesLoaded = 0;

window.preload = function() {

    worldPieces[0] = createVideo(['assets/tiles/Sand/Sand1.mp4']);
    worldPieces[1] = createVideo(['assets/tiles/Sand/Sand2.mp4']);
    worldPieces[2] = createVideo(['assets/tiles/Sand/Sand3.mp4']);

    for(let i = 0; i < worldPieces.length; i++){
        loaded[i] = false;
    }
}

```

And then in draw:

```auto
if(tilesLoaded == worldPieces.length){
    for (let y = 0; y < rows; y++) {
        for (let x = 0; x < cols; x++) {
            let index = (y+offsetY)*mapWidth + (x+offsetX);
            let num = tiles[index];
            if (num >= 0) {
                image(worldPieces[num], x*gridsize, y*gridsize, gridsize, gridsize);
            }
        }
    }
} else {
    for(let i = 0; i < worldPieces.length; i++){
        if(worldPieces[i] !== undefined && worldPieces[i] !== null){
            if(worldPieces[i].elt.readyState == 4){
                if(loaded[i] == false){
                    worldPieces[i].loop();
                    tilesLoaded += 1;
                    loaded[i] = true;
                }
            }
        }
    }
}

```

The tilesLoaded will needly count up to the right number, and tries to start putting the videos in image, but it will do nothing but displaying the error again. Until I’ve reloaded a couple of times and then it works.

Long story. In short: What is the best way to load a couple of videos. I don’t mind if I have to wait for a while for them to load. Would prefer a preloading animation actually.

The amount of videos also doesn’t really play a role. If I load 5 or 20, the same issue occurs.

Update: I’ve updated P5 from 1.1.9 to 1.2.0. The same behaviour, but the error in the console changed:

```auto
Uncaught (in promise) TypeError: f.default._friendlyAutoplayError is not a function
    at p5.min.js:3

```

---

<div class="post-metadata">

**Author:** ![sandersturing](https://avatars.discourse-cdn.com/v4/letter/s/8edcca/32.png) [@sandersturing](https://discourse.processing.org/u/sandersturing)\
**Post date:** [February 2, 2021, 7:58pm UTC](https://discourse.processing.org/t/loading-multiple-videos-fails-works-randomly/27555/2 "2021-02-02T19:58:28Z")

</div>

Also, using the callback in createvideo in the preload doesn’t really help. It just fires like the video is loaded. I also have the feeling it’s not an issue that the videos itself are not loaded, they are a combined file size of 1.6MB and I loads it locally.

---

<div class="post-metadata">

**Author:** ![sandersturing](https://avatars.discourse-cdn.com/v4/letter/s/8edcca/32.png) [@sandersturing](https://discourse.processing.org/u/sandersturing)\
**Post date:** [February 4, 2021, 8:11am UTC](https://discourse.processing.org/t/loading-multiple-videos-fails-works-randomly/27555/3 "2021-02-04T08:11:33Z")

</div>

I noticed it gets stuck on the `worldPieces[i].loop();`  
The thing ofcourse is that this loop function is in between if statements that check on undefined, null and even check the readystate.

Also, when it fails for one, it fails for all. It’s or ALL videos are loaded, or NONE are loaded. Hit or miss.

Any advice, suggestions or ideas are more than welcome. I’m really breaking my head over this one!

---

<div class="post-metadata">

**Author:** ![Pr0tonX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pr0tonx/32/2590_2.png) [@Pr0tonX](https://discourse.processing.org/u/Pr0tonX)\
**Post date:** [February 4, 2021, 9:31pm UTC](https://discourse.processing.org/t/loading-multiple-videos-fails-works-randomly/27555/4 "2021-02-04T21:31:56Z")

</div>

Hi,  
I see that you don’t use the native API of P5, and I suppose it can creates troubles because of the asynchronous behavior of JS. You should try the `preload()` function implemented in p5, because I think otherwise P5 don’t wait until the end of the **window** prelaod.

It is just an assumption, but I would highly recommand to use the p5 API. I never took a look to it, but I can imagine that the preload of the `window`and p5 APi aren’t the same and are not connected.

---

<div class="post-metadata">

**Author:** ![sandersturing](https://avatars.discourse-cdn.com/v4/letter/s/8edcca/32.png) [@sandersturing](https://discourse.processing.org/u/sandersturing)\
**Post date:** [February 8, 2021, 8:15pm UTC](https://discourse.processing.org/t/loading-multiple-videos-fails-works-randomly/27555/5 "2021-02-08T20:15:13Z")

</div>

Hey Pr0tonX,

Thought that you were on to something. Sounds really plausible. I now moved everything to just a ‘normal’ setup (loading a js sketch directly in the HTML file, no weird other javascript things, just plain old P5), but the same happens. Sometimes it loads normally a 10 times in a row, and then it fails 10 times in a row.

I use the preload function and call `createVideo` for the videos, and then try to call the loop function. Doesn’t really matter where I put the loop-function (at preload, at setup, in draw with checks) it just fails randomly for all videos. If I println the video object before I try to call video.loop, I do get the whole video. I mean, all specs seem to be correct, but it still gets stuck on the `loop` function.

 ![Screenshot 2021-02-08 at 21.09.40](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/855b4b3cda5cbc4ce7dc76c90b36b7e0c6c18314.png)

For me the weirdest thing is that it fails for all videos or for none. There is no in between. This besides the complete randomness of when it fails. Maybe it’s just too much videos, I don’t know. Plan is actually to load a LOT more…

---

<div class="post-metadata">

**Author:** ![Pr0tonX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pr0tonx/32/2590_2.png) [@Pr0tonX](https://discourse.processing.org/u/Pr0tonX)\
**Post date:** [February 9, 2021, 3:03pm UTC](https://discourse.processing.org/t/loading-multiple-videos-fails-works-randomly/27555/6 "2021-02-09T15:03:48Z")

</div>

Maybe can you post you whole code here ? When I try something similar to see what happens, I see as you the “friendly error” but I can’t find what’s troubling you. I would be able to test it on my own and what’s happening

---

<div class="post-metadata">

**Author:** ![monkey](https://avatars.discourse-cdn.com/v4/letter/m/e79b87/32.png) [@monkey](https://discourse.processing.org/u/monkey)\
**Post date:** [May 11, 2021, 1:25am UTC](https://discourse.processing.org/t/loading-multiple-videos-fails-works-randomly/27555/7 "2021-05-11T01:25:42Z")

</div>

Hi, I tried moving my p5 sketches which use small size video clips from p5 web editor into VSC (planning to use longer clips) and I am also getting this error you mention “Uncaught (in promise) TypeError: f.default.\_friendlyAutoplayError is not a function at p5.min.js:3” – if I unhide the video shows up frozen. Occasionally it will play. This is with only one video clip that is 4.7 MB. The sketch and video loop work perfectly well in p5 web editor. I tried it with a different sketch that also uses a video clip and had this same situation. Any advice?

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [May 12, 2021, 5:44am UTC](https://discourse.processing.org/t/loading-multiple-videos-fails-works-randomly/27555/8 "2021-05-12T05:44:40Z")

</div>

Hi! Welcome to the forum!

Please ask the same question only on one thread or at least link to it - [Video loops in p5 web editor but error/not playing in VSC](https://discourse.processing.org/t/video-loops-in-p5-web-editor-but-error-not-playing-in-vsc/30028)

---

<div class="post-metadata">

**Author:** ![monkey](https://avatars.discourse-cdn.com/v4/letter/m/e79b87/32.png) [@monkey](https://discourse.processing.org/u/monkey)\
**Post date:** [May 13, 2021, 10:51pm UTC](https://discourse.processing.org/t/loading-multiple-videos-fails-works-randomly/27555/9 "2021-05-13T22:51:35Z")

</div>

Hi, sorry about that - I noticed that this was a bit similar. Thank you