Loading multiple videos, fails/works randomly

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

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:

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){
                    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:

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

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.

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!

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 windowand p5 APi aren’t the same and are not connected.

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.

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…

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