I get a TypeError: f.default._friendlyAutoplayError randomly when calling video.loop()

p5.js
#1

Can’t really find anything when googling the error. When I call video.loop (actually, I’m calling a couple of really small videos (together smaller than 2MB), like so:

for(let i = 0; i < videos.length; i++){
    videos[i].loop();
}

I get a TypeError: f.default._friendlyAutoplayError (in p5.min.js:3) randomly (as in on loading the page) on that line.

I use createVideo to create the videos in preload:

function preload(){
    for(let i = 0; i < videoNames.length; i++){
        videos[i] = createVideo(videoNames[i]);
    }
}

75% of the time the code just works by the way. At random moments I get this error and can’t play the videos. If I console.log the videos I do get a result and the object seems to be loaded.

Any ideas what this error is and where it comes from?

1 Like
#2

I thought it was a good idea to load the full P5, instead of the minified version. This gives me the following error (for all videos):

p5.js says: The media that tried to play (with 'video.mp4') wasn't allowed to by this browser, most likely due to the browser's autoplay policy. Check out https://developer.mozilla.org/docs/Web/Media/Autoplay_guide for more information about why.

Of course, this is BS, since the same video(s) play perfectly on 75% of the page loads…

1 Like
#3

It is a friendly error to warn you that you can’t autoplay medias on your browser because of the restrictions you’ve settled. On Firefox, you can see this when you block every autoplay :
image
You can click on the “play” button and change the setting for your local port to avoid it

#4

Hey Pr0tonX,

Thanks for looking with me. I understand the error, but shouldn’t it then display every time? Now it just shows up randomly about 25% of the time on page load, the rest of the time everything plays fine (without me changing anything. Same videos, same code, same browser, same session etc.).
I have the feeling it just can’t handle displaying so many videos and the error is not really connected.

Anyway, I just think playing a lot of videos suck in whatever browser or program you’re trying to do it. I only could get it to work reliable in Chrome anyway. Safari stopped looping after a while, and Firefox didn’t do anything at all.
I changed all files to GIFS (which unfortunately are a lot bigger in file size) and everything runs quite smoothly in all browsers.

1 Like
#5

I can’t say, I cannot reproduce your error ; but yes running videos can be ressource intensive if you don’t have a decent GPU (I think browsers use to enable it ) so it can causes troubles if you try to load a lot, but it is only asumption for now.

Maybe one of your videos creates an issue while loading in your preload, and the error fallback can be wrong.
Did you try to load your videos asynchronously ? Using the fallback of the createVideo function ? It might avoid some loading issues in case it is the point :

const videoPaths = ['cool.mp4', 'banana.mp4', 'super.mp4'];
const videos = []
function preload(){
    const loadVideos = (i = -1) => {
       i ++;
       if (i <= videoPaths.length - 1){
             videos[i] = createVideo(videoPaths[i], loadVideo(i));
      } else {
             videos[i] = createVideo(videoPaths[i]);
      }
      
   }
}