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){
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:
Uncaught (in promise) TypeError: f.default._friendlyAutoplayError is not a function
at p5.min.js:3
