Javascript 如何在主代码之前播放视频？

我正在使用

p5.js

和

p5.play

为学校项目制作游戏，但我无法让

setTimeout

或

setInterval

工作，因此我无法在游戏开始前进行介绍性游戏

当基于时间的等待代码都不起作用时，我不知道怎么做。每当我尝试使用它们时，我要么得到一个黑屏，要么得到一个静止的图像

有人能帮忙吗？还有其他解决办法吗

我的代码如下所示：

let sans；
让歌声；
让加斯特；
让玩家；
让playerImg；
让胃痛；
让桑辛；
盒子；
让第1箱；
让第二箱；
让第三箱；
let mode=0；
让健康；
设hp=100；
让骨头；
让博内姆；
让爆炸机；
让爆炸声；
让我们介绍一下；
让我们结束；
让movingRight=false；
让左移=假；
设movingUp=false；
放下=错误；
让gamemode=true；
设方向=0；
设xpos=300；
设ypos=300；
设速度=3；
函数预加载（）{
声音格式（“mp3”、“ogg”）；
song=loadSound（“资产/调用”）；
intro=loadVideo（'assets/intro.mp4'）；
}
函数设置（）{
createCanvas（600600）；
模式=0；
//结束
end=createVideo（['assets/end.mp4'，'assets/end.webm']）；
end.hide（）；
//介绍
intro=createVideo（['assets/intro.mp4'，'assets/intro.webm']）；
介绍隐藏（）；
//盒子
//顶
box=createSprite（300300400，高度/60）；
box.shapeColor=颜色（255）；
框.setCollider（'矩形'，10,10,230，-100）；
//底部
box1=createSprite（300500400，高度/60）；
box1.shapeColor=颜色（255）；
框1.setCollider（'矩形'，-10，-10,230，-100）；
//框2
box2=createSprite（500400，宽度/60210）；
box2.shapeColor=颜色（255）；
框2.setCollider（'矩形'，0,0，-140,200）；
//框3
box3=createSprite（100400，宽度/60210）；
box3.shapeColor=颜色（255）；
框3.setCollider（'矩形'，0,0，-140,200）；
//桑
sans=createSprite（400160）；
sansImg=loadImage（'assets/sansC.gif'）；
sans.addImage（'sans'，sansImg）；
sans.scale=0.70；
//加斯特
gaster=createSprite（180140）；
gasterImg=loadImage（'assets/g.gif'）；
gaster.addImage（“gaster”，gasterImg）；
gaster.scale=1.3；
//玩家
player=createSprite（290350）；
playerImg=loadImage（'assets/kebab.png'）；
player.addImage（'player'，playerImg）；
玩家比例-=0.30；
//骨头
bone=createSprite（100400）；
boneImg=loadImage（'assets/Sbone.png'）；
骨骼。添加图像（'bone'，boneImg）；
骨固定速度（3，方向）；
//健康酒吧
健康=createSprite（250530100,20）；
health.shapeColor=color（255,255,0）；
health.width=hp*3；
//---------------------------------------------------------------------------------------
}
//模式0
函数绘图（）{
背景（0）；
填充（255）；
模式=0；
如果（模式==0）{
文本大小（30）；
文本（“按下鼠标键”，160、300）；
}
//模式1
如果（模式==1）{
图像（简介，-400，-190，宽*2.3，高*2.3）；
游戏介绍（）；
setTimeout（changemode（），7000）；
模式=2；
}
//模式2
如果（模式==2）{
歌曲。游戏（）；
//碰撞
玩家。碰撞（方块）；
player.collide（框1）；
player.collide（框2）；
player.collide（框3）；
//更新移动字符
如果（向右移动）{
player.position.x+=速度；
}
如果（向左移动）{
player.position.x-=速度；
}
如果（移动）{
player.position.y-=速度；
}
如果（向下移动）{
player.position.y+=速度；
}
}
//模式3
如果（模式==3）{
图像（结束、0、0、宽度、高度）；
结束。玩（）；
宋。停（）；
drawSprites（）；
}  
}
//-------------------------------------------------------------------'
功能鼠标按下（）{
dmg（5）；
health.width=hp*3；
如果（模式==0）{
模式=1；
}
}
功能键按下（）{
如果（键=='w'）{
movingUp=true；
}
如果（键=='a'）{
左移=真；
}
如果（键=='s'）{
向下移动=正确；
}
如果（键=='d'）{
movingRight=正确；
}
}
函数keyReleased（）{
如果（键=='w'）{
movingUp=false；
}
如果（键=='a'）{
左移=假；
}
如果（键=='s'）{
向下移动=错误；
}
如果（键=='d'）{
movingRight=错误；
}
}

更改此

设置间隔（changemode（），7000）设置超时（changemode（），7000）

否则它将每7秒运行一次

另外，使
changemode（）
函数可访问，它当前位于
dmg（x）

let sans；
让歌声；
让加斯特；
让玩家；
让playerImg；
让胃痛；
让桑辛；
盒子；
让第1箱；
让第二箱；
让第三箱；
let mode=0；
让健康；
设hp=100；
让骨头；
让博内姆；
让爆炸机；
让爆炸声；
让我们介绍一下；
让我们结束；
让movingRight=false；
让左移=假；
设movingUp=false；
放下=错误；
让gamemode=true；
设方向=0；
设xpos=300；
设ypos=300；
设速度=3；
函数预加载（）{
声音格式（“mp3”、“ogg”）；
song=loadSound（“资产/调用”）；
intro=loadVideo（'assets/intro.mp4'）；
}
函数设置（）{
createCanvas（600600）；
模式=0；
//结束
end=createVideo（['assets/end.mp4'，'assets/end.webm']）；
end.hide（）；
//介绍
intro=createVideo（['assets/intro.mp4'，'assets/intro.webm']）；
介绍隐藏（）；
//盒子
//顶
box=createSprite（300300400，高度/60）；
box.shapeColor=颜色（255）；
框.setCollider（'矩形'，10,10,230，-100）；
//底部
box1=createSprite（300500400，高度/60）；
box1.shapeColor=颜色（255）；
框1.setCollider（'矩形'，-10，-10,230，-100）；
//框2
box2=createSprite（500400，宽度/60210）；
box2.shapeColor=颜色（255）；
框2.setCollider（'矩形'，0,0，-140,200）；
//框3
box3=createSprite（100400，宽度/60210）；
box3.shapeColor=颜色（255）；
框3.setCollider（'矩形'，0,0，-140,200）；
//桑
sans=createSprite（400160）；
sansImg=loadImage（'assets/sansC.gif'）；
sans.addImage（'sans'，sansImg）；
sans.scale=0.70；
//加斯特
gaster=createSprite（180140）；
gasterImg=loadImage（'assets/g.gif'）；
gaster.addImage（“gaster”，gasterImg）；
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();
  }
}