P5JS - Problem with asynchronous video loading/playing

Answers

• 2sman

  August 2017

  Here is the link to my code
• kfrajer

  September 2018

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