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

**URL:** <https://discourse.processing.org/t/video-doesnt-play-on-the-canvas-i-dont-understand-why/48095>\
**Category:** Coding Questions\
**Created:** [March 12, 2026, 10:33am UTC](https://discourse.processing.org/t/video-doesnt-play-on-the-canvas-i-dont-understand-why/48095 "2026-03-12T10:33:04Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![EricRogerGarcia](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ericrogergarcia/32/21029_2.png) [@EricRogerGarcia](https://discourse.processing.org/u/EricRogerGarcia)\
**Post date:** [March 12, 2026, 10:33am UTC](https://discourse.processing.org/t/video-doesnt-play-on-the-canvas-i-dont-understand-why/48095/1 "2026-03-12T10:33:04Z")

</div>

Hello,

I tried this

```auto
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

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

```

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

I tried with

```auto
p5.disableFriendlyErrors = true;

```

at the beginning (same thing, same error)

---

<div class="post-metadata">

**Author:** ![limzykenneth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/limzykenneth/32/1449_2.png) [@limzykenneth](https://discourse.processing.org/u/limzykenneth)\
**Post date:** [March 12, 2026, 10:48am UTC](https://discourse.processing.org/t/video-doesnt-play-on-the-canvas-i-dont-understand-why/48095/2 "2026-03-12T10:48:22Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [March 12, 2026, 11:04am UTC](https://discourse.processing.org/t/video-doesnt-play-on-the-canvas-i-dont-understand-why/48095/3 "2026-03-12T11:04:25Z")

</div>

Hello @limzykenneth ,

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

> [@limzykenneth](#):
>
> Browsers nowadays don’t allow any video autoplay prior to user interaction

Reference for Chrome:

> **[Autoplay policy in Chrome  |  Blog  |  Chrome for Developers](https://developer.chrome.com/blog/autoplay)**
>
> Learn best practices for good user experiences with the new autoplay policies in Chrome.

> [@limzykenneth](#):
>
> Practically it means rather than calling `video.loop()` in `setup()`, it will need to be called in `mouseClicked()` instead (or other interaction

Working example of that:

> **[Video on Canvas](https://p5js.org/examples/imported-media-video-canvas/)**
>
> Display and stylize a video on the canvas.

`:)`

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [March 12, 2026, 5:08pm UTC](https://discourse.processing.org/t/video-doesnt-play-on-the-canvas-i-dont-understand-why/48095/4 "2026-03-12T17:08:49Z")

</div>

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](http://www.lagers.org.uk/gallery/gy-rop/gy-index.html)

---

<div class="post-metadata">

**Author:** ![EricRogerGarcia](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ericrogergarcia/32/21029_2.png) [@EricRogerGarcia](https://discourse.processing.org/u/EricRogerGarcia)\
**Post date:** [March 13, 2026, 8:08am UTC](https://discourse.processing.org/t/video-doesnt-play-on-the-canvas-i-dont-understand-why/48095/5 "2026-03-13T08:08:20Z")

</div>

**Thanks**

So, this works !

```auto
let video;

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

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

function mousePressed() {
  video.loop();
}

```

---

<div class="post-metadata">

**Author:** ![EricRogerGarcia](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ericrogergarcia/32/21029_2.png) [@EricRogerGarcia](https://discourse.processing.org/u/EricRogerGarcia)\
**Post date:** [March 13, 2026, 8:17am UTC](https://discourse.processing.org/t/video-doesnt-play-on-the-canvas-i-dont-understand-why/48095/6 "2026-03-13T08:17:16Z")

</div>

> [@limzykenneth](#):
>
> you can open an issue about this on GitHub so we can look into it.

issue opened on Github

😉