P5JS - Problem with asynchronous video loading/playing

2sman

Hello, I am trying to select from an array of videos, play a video on button click (LEFT ARROW) and then after the video stops it hides the video and waits for button press to play another random video again. I've tried variations on adding in or removing hide() and stop() in the onended call. Nothing seems to work right. I'm wondering if this relates to this issue I've read elsewhere about asynchronous video calls. Though it seems different since I'm preloading my videos.

My simplified code is here: http://alpha.editor.p5js.org/full/Hy71uQP_b

Posts about asynchronous video load issues here

2sman

Here is the link to my code

kfrajer

This is an old post but I gave it a try. I can play multiple videos but something is not working. Either one of the videos do not have the proper format or one needs to dig into the documentation to understand the proper way to stop and rewind the video. I refer to rewind coming from the java realm but not sure if this applies to js. Either case, more research on the topic is needed and I do not think it is a bug but more likely proper system calls...

Kf

var stage = 1;
var videos = [];
var whichVideo=0;

function preload(){
    videos[0] = createVideo("videos/vid0.mp4");    
    videos[1] = createVideo("videos/vid1.mp4");    
    videos[2] = createVideo("videos/vid2.mp4");

}

function setup() { 
   createCanvas(windowWidth, windowHeight);  //if much more videos change this to for loop to load&&hide
    videos[0].hide();
      videos[2].hide();
      videos[1].hide();
} 

function draw() { 
background(255,0,155);
  if (stage === 1){
        text("Stage 1",100,100);
  } else {
    image(videos[whichVideo],0,0,windowWidth,windowHeight);
         text("Video "+whichVideo,100,100);
  }
}

function playTheVideo() {      
      videos[whichVideo].play();
      videos[whichVideo].onended(videoOver); //when video ends, call videoOver to return to first screen
}

function videoOver() {
    console.log("stopping video now"); 
    videos[whichVideo].pause();
    //videos[whichVideo].rewind();
    videos[whichVideo].hide();
    stage = 1;
}

function keyPressed() {
    if (stage === 1) {
        if (keyCode === LEFT_ARROW) {
        //accepted
        //pick random video from array
        whichVideo = (whichVideo+1)%videos.length;//floor(random(videos.length));         
        stage = 2;
              playTheVideo();
     } 

    }
}