Make a button display after a video has played using p5.js - p5.js

Question

I am trying to make a button appear after a video has played. I know this has got to do with setInterval, but I'm unsure how to go about implementing this into my project. the video is roughly 40 seconds long, so I would like a way to show the button after the video has finished playing. I am using the p5.js framework.
it is meant to be a loading screen for a game that I am working on, after the video has finished a button should appear to let you advance to start the game.
bellow is my code.
let bg;
let logo;
let button;
let vid;
let click;
function preload() {
bg = loadImage('assets/space.png');
logo = loadImage('assets/logo.png');
rock1 = loadImage('assets/rock1.png');
rock2 = loadImage('assets/rock2.png');
go = loadImage('assets/go.png');
hs = loadImage('assets/hs.png');
bg1 = loadImage('assets/space.png');
w = loadImage('assets/w.png');
a = loadImage('assets/a.png');
s = loadImage('assets/s.png');
d = loadImage('assets/d.png');
mouse = loadImage('assets/mouse.png');
click = loadSound('assets/click.mp3');
}
function setup() {
vid = createVideo('assets/vid.mp4')
bg = loadImage('assets/space1.png');
createCanvas(windowWidth, windowHeight);
strokeWeight(10);
// frameRate(30);
button = createButton('CLICK TO START');
button.position(650, 650);
button.mousePressed(soundPlay)
vid.loop();
}
function soundPlay() {
if (!click.isPlaying()) {
click.play();
}
}
function draw() {
background(bg);
stroke(189, 51, 164);
rect(190, 90, 1070, 600, 10);
for (let i = 200; i < 1250; i++) {
let r = random(255);
stroke(r);
line(i, 100, i, 680);
}
image(logo, 180, 70, 200, 200);
stroke(189, 51, 164);
line(740, 30, 700, 85);
line(660, 30, 700, 85);
circle(660, 30, 20);
circle(740, 30, 20);
image(rock1, 1300, 70, 100, 100);
image(rock2, 60, 70, 100, 100);
rect(400, 150, 650, 300, 10);
image(bg1, 400, 155, 650, 290);
rect(400, 450, 650, 180, 10);
image(bg1, 400, 455, 650, 170);
image(w, 410, 500, 25, 25);
image(a, 410, 530, 24, 24);
image(s, 410, 560, 24, 24);
image(d, 410, 590, 24, 24);
image(mouse, 710, 500, 25, 25);
noStroke();
fill(255)
text("CONTROLLS:", 660, 470);
textSize(20);
textStyle(BOLD);
text("SPACEBAR:", 710, 550);
image(vid, 400, 150, 650, 300);
text("LOADING: . . .", 650, 150);
}

Answer 1

You can try using vid.onended() to call a function when the video is done, to later display a button. documentation

Answer 2

As you're not using the video as its own element, you're plonking it in the canvas and drawing an image each frame -
you could simply wrap the image(vid, 400, 150, 650, 300); in an if statement:
if (showVid) {
image(vid, 400, 150, 650, 300);
}
And then you'll set the showVid variable to false when your video duration has ended:
const videoLength = 5000; // unsure if there's a way in p5.js to get a video's duration
setTimeout(() => showVid = false, videoLength)
Here's a really simple example I've put together, and a link to the p5.js sketch so you can play it.
let vid;
let showVid = true;
function setup() {
createCanvas(400, 400);
vid = createVideo('vid.mp4');
console.log(vid);
vid.hide();
vid.loop();
const videoLength = 5000; // unsure if there's a way in p5.js to get a video's duration
setTimeout(() => showVid = false, videoLength)
}
function draw() {
background(150);
if (showVid) {
image(vid, 0, 100);
}
}