javascript - How do I make a video play before my main code?

Question

I am using p5.js and p5.play to make a game for a school project, but I can't get the setTimeout or setInterval to work, so I can't make an intro play before my game begins.

I don't know how to do this when neither time based wait codes work. Whenever I try to use them I either get a black screen, or a stuck still image

Anyone that can help? any other solution?

My code looks like this:

let sans; 
let song;
let gaster;
let player;
let playerImg;
let gasterImg;
let sansImg;
let box;
let box1;
let box2;
let box3;
let mode = 0;

let health;
let hp = 100;

let bone;
let boneImg;

let blaster;
let blasterImg;
let intro;
let end;




let movingRight = false;
let movingLeft = false;
let movingUp = false;
let movingDown = false;
let gamemode = true;
let direction = 0;

let xpos = 300;
let ypos = 300;
let speed = 3;


function preload() {
 soundFormats('mp3', 'ogg');
  song = loadSound('assets/call');
  intro = loadVideo('assets/intro.mp4');
  
  }
function setup() {
createCanvas(600, 600);
mode = 0;
//end
end = createVideo(['assets/end.mp4', 'assets/end.webm']);
end.hide();

//intro
intro = createVideo(['assets/intro.mp4', 'assets/intro.webm']);
intro.hide();


//box 
//top
box = createSprite(300, 300, 400, height/60);
box.shapeColor = color(255);
 box.setCollider('rectangle', 10, 10, 230, -100);

//bottom
box1 = createSprite(300, 500, 400, height/60);
box1.shapeColor = color(255);
 box1.setCollider('rectangle', -10, -10, 230, -100);

//box2
box2 = createSprite(500, 400, width/60, 210);
box2.shapeColor = color(255);
 box2.setCollider('rectangle', 0, 0, -140, 200);

//box3
box3= createSprite(100, 400, width/60, 210);
box3.shapeColor = color(255);
box3.setCollider('rectangle', 0, 0, -140, 200);



//sans
sans = createSprite(400, 160);
sansImg = loadImage('assets/sansC.gif');
sans.addImage('sans', sansImg);
sans.scale = 0.70;

//gaster
gaster = createSprite(180, 140);
gasterImg = loadImage('assets/g.gif');
gaster.addImage('gaster', gasterImg);
gaster.scale = 1.3;

//player 
player = createSprite(290, 350); 
playerImg = loadImage('assets/kebab.png');
player.addImage('player', playerImg);
player.scale-=0.30;

//bone 
bone = createSprite(100, 400);
boneImg = loadImage('assets/Sbone.png');
bone.addImage('bone', boneImg);
bone.setSpeed(3,direction);

//healthbar
health = createSprite(250, 530, 100, 20);
health.shapeColor = color(255, 255, 0);
health.width = hp*3;


//---------------------------------------------------------------------------------------
}
//mode 0
function draw() {
background(0);
fill(255);
mode = 0;
if (mode == 0) {
  textSize(30);
  text("Press mouse button", 160, 300);
  
}

 //mode 1
 if (mode == 1){
    image(intro, -400, -190, width*2.3, height*2.3);
     intro.play();
     setTimeout(changemode(), 7000);
  mode = 2;
     }

      
 
     //mode 2
     if (mode == 2){
  song.play();
     
 //collision
 
  player.collide(box);
  player.collide(box1);
  player.collide(box2);
  player.collide(box3);
  
  
  // update moving character
  if (movingRight) {
    player.position.x += speed;
  }
  if (movingLeft) {
    player.position.x -= speed;
  }
  if (movingUp) {
    player.position.y -= speed;
  }
  if (movingDown) {
    player.position.y += speed;
  }

}
  //mode 3
   if (mode == 3) {
     image(end, 0, 0, width, height);
     end.play();
     song.stop();
 drawSprites();   
 }  
 }
 
  //-------------------------------------------------------------------'
function mousePressed () {
  dmg(5);
  health.width = hp*3;
  
  if (mode == 0){
  mode = 1;
  }
  }
  

                  
  
function keyPressed() {
  if (key == 'w') {
    movingUp = true;
  }
  if (key == 'a') {
    movingLeft = true;
  }
  if (key == 's') {
    movingDown = true;
  }
  if (key == 'd') {
    movingRight = true;
  }
  
}

function keyReleased() {
  if (key == 'w') {
    movingUp = false;
  }
  if (key == 'a') {
    movingLeft = false;
  }
  if (key == 's') {
    movingDown = false;
  }
  if (key == 'd') {
    movingRight = false;
  }
  
 
 }

question from:https://stackoverflow.com/questions/65919364/how-do-i-make-a-video-play-before-my-main-code

Answer 1

Change this setInterval(changemode(), 7000); to setTimeout(changemode(), 7000);

Otherwise it will run every 7th second.

Also, make the changemode() function accessible, it is currently inside dmg(x)

let sans; 
let song;
let gaster;
let player;
let playerImg;
let gasterImg;
let sansImg;
let box;
let box1;
let box2;
let box3;
let mode = 0;

let health;
let hp = 100;

let bone;
let boneImg;

let blaster;
let blasterImg;
let intro;
let end;


let movingRight = false;
let movingLeft = false;
let movingUp = false;
let movingDown = false;
let gamemode = true;
let direction = 0;

let xpos = 300;
let ypos = 300;
let speed = 3;


function preload() {
  soundFormats('mp3', 'ogg');
  song = loadSound('assets/call');
  intro = loadVideo('assets/intro.mp4');
}

function setup() {
  createCanvas(600, 600);
  mode = 0;
  //end
  end = createVideo(['assets/end.mp4', 'assets/end.webm']);
  end.hide();

  //intro
  intro = createVideo(['assets/intro.mp4', 'assets/intro.webm']);
  intro.hide();


  //box 
  //top
  box = createSprite(300, 300, 400, height/60);
  box.shapeColor = color(255);
  box.setCollider('rectangle', 10, 10, 230, -100);

  //bottom
  box1 = createSprite(300, 500, 400, height/60);
  box1.shapeColor = color(255);
  box1.setCollider('rectangle', -10, -10, 230, -100);

  //box2
  box2 = createSprite(500, 400, width/60, 210);
  box2.shapeColor = color(255);
  box2.setCollider('rectangle', 0, 0, -140, 200);

  //box3
  box3= createSprite(100, 400, width/60, 210);
  box3.shapeColor = color(255);
  box3.setCollider('rectangle', 0, 0, -140, 200);



  //sans
  sans = createSprite(400, 160);
  sansImg = loadImage('assets/sansC.gif');
  sans.addImage('sans', sansImg);
  sans.scale = 0.70;

  //gaster
  gaster = createSprite(180, 140);
  gasterImg = loadImage('assets/g.gif');
  gaster.addImage('gaster', gasterImg);
  gaster.scale = 1.3;

  //player 
  player = createSprite(290, 350); 
  playerImg = loadImage('assets/kebab.png');
  player.addImage('player', playerImg);
  player.scale-=0.30;

  //bone 
  bone = createSprite(100, 400);
  boneImg = loadImage('assets/Sbone.png');
  bone.addImage('bone', boneImg);
  bone.setSpeed(3,direction);

  //healthbar
  health = createSprite(250, 530, 100, 20);
  health.shapeColor = color(255, 255, 0);
  health.width = hp*3;


  //---------------------------------------------------------------------------------------
}
//mode 0
function draw() {
  background(0);
  fill(255);
  mode = 0;
  if (mode == 0) {
    textSize(30);
    text("Press mouse button", 160, 300);

  }

  //mode 1
  if (mode == 1){
    image(intro, -400, -190, width*2.3, height*2.3);
    intro.play();
    setTimeout(changemode(), 7000);
    mode = 2;
  }

  //mode 2
  if (mode == 2) {
    song.play();

      //collision

      player.collide(box);
      player.collide(box1);
      player.collide(box2);
      player.collide(box3);


      // update moving character
      if (movingRight) {
        player.position.x += speed;
      }
      if (movingLeft) {
        player.position.x -= speed;
      }
      if (movingUp) {
        player.position.y -= speed;
      }
      if (movingDown) {
        player.position.y += speed;
      }
    }

  //mode 3
  if (mode == 3) {
    image(end, 0, 0, width, height);
    end.play();
    song.stop();
    drawSprites();   
  }  
}

//-------------------------------------------------------------------'
function mousePressed () {
  dmg(5);
  health.width = hp*3;

  if (mode == 0){
    mode = 1;
  }
}

function keyPressed() {
  if (key == 'w') {
    movingUp = true;
  }
  if (key == 'a') {
    movingLeft = true;
  }
  if (key == 's') {
    movingDown = true;
  }
  if (key == 'd') {
    movingRight = true;
  }

}

function keyReleased() {
  if (key == 'w') {
    movingUp = false;
  }
  if (key == 'a') {
    movingLeft = false;
  }
  if (key == 's') {
    movingDown = false;
  }
  if (key == 'd') {
    movingRight = false;
  }
}

//dmg 
function dmg(x) {
  hp -= x;
  if (hp <= 0) {
    mode = 3;
  }
}

function changemode() {
  if (mode == 1) {
    mode = 2;
  }
  if (mode == 2) {
    song.play();
  }
  if (mode == 3) {
    song.stop();
  }
}