Video doesn't play on the canvas. I don't understand why!

p5.js Coding Questions
1

Hello,

I tried this

let video;

function setup() {
  createCanvas(900, 600);
  video = createVideo("video.mp4");
  video.hide();
  video.loop();
}

function draw() {
  background(200);
  image(video,10, 10);
}

video.mp4 works fine when dropped on the browser

I have only the first video image.

I don’t understand why the site example works but not this.

I have this in the console

Uncaught (in promise) TypeError: h.default._friendlyAutoplayError is not a function

(I hope it’s not a silly question !)

I tried with

p5.disableFriendlyErrors = true;

at the beginning (same thing, same error)

2

Browsers nowadays don’t allow any video autoplay prior to user interaction, which means the video must play on user command at the start of page load. Practically it means rather than calling video.loop() in setup(), it will need to be called in mouseClicked() instead (or other interaction, eg. as you noticed, dropping the video works).

The FES error is relating to a message that explain this but probably was not replaced when we did the updates, you can open an issue about this on GitHub so we can look into it.

3 Likes
3

Hello @limzykenneth ,

Thanks for that! Started an exploration of this and came to the same answer.

Reference for Chrome:

Working example of that:

:)

1 Like
4

I found the same problem with audio files.

My solution was to create a splash / loading screen then once the audio file (and any other resources) were loaded invite the user to click on the sketch which would take them to the main sketch display and play the audio.

You can see it in action here