Блог

Я пытаюсь сделать так, чтобы кнопка появлялась после воспроизведения видео. Я знаю, что это связано с setInterval, но я не уверен, как внедрить это в свой проект. видео длится примерно 40 секунд, поэтому я хотел бы, чтобы кнопка отображалась после завершения воспроизведения видео. Я использую p5.js рамки.

это должно быть загрузочным экраном для игры, над которой я работаю, после завершения видео должна появиться кнопка, позволяющая вам перейти к началу игры.

ниже приведен мой код.

 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);



}
 

Вы можете попробовать использовать vid.onended() для вызова функции после завершения видео, чтобы позже отобразить кнопку. Документация

Поскольку вы не используете видео в качестве собственного элемента, вы помещаете его на холст и рисуете изображение в каждом кадре — вы можете просто завернуть image(vid, 400, 150, 650, 300); его в оператор if:

 if (showVid) {
  image(vid, 400, 150, 650, 300);
}
 

А затем вы установите showVid переменную в значение false, когда продолжительность вашего видео закончится:

 const videoLength = 5000; // unsure if there's a way in p5.js to get a video's duration
setTimeout(() => showVid = false, videoLength)
 

Вот действительно простой пример, который я собрал, и ссылка на p5.js набросайте эскиз, чтобы вы могли в него поиграть.

 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); 
  }
}