Element play method raised an error asynchronously

p5.js Libraries
1

Hi everyone!

I’m working on a larger sketch that needs to be able to play videos and control them with p5.touchgui elements. As you’ll see when you open my sketch, the video will only sometimes play, and a lot of the time throw the following error:

WARN: Element play method raised an error asynchronously
Error {stack: "[43]</_main.default.MediaElement.prototype.play@https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js:69814:24
draw@about:srcdoc:75:15
[39]</_main.default.prototype.redraw@https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js:65953:19
p5/this._draw@https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js:58869:25
"} stack: "[43]</_main.default.MediaElement.prototype.play@https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js:69814:24
draw@about:srcdoc:75:15
[39]</_main.default.prototype.redraw@https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js:65953:19
p5/this._draw@https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js:58869:25
"

I have no idea what is really causing this, or what I can do to fix it. The error message honestly doesn’t make any sense to me. This is my first time working with video in p5, so I apologize for my newness here… What I’m trying to do is have the toggle trigger a sequence that displays the video, plays it, and when the video gets to the end, have it pause and hold the image on screen until the toggle is turned off. When it is turned off, I want the video to go back to the beginning so that it can play again from the beginning next time the toggle turns on, essentially resetting itself. What is weird to me is that sometimes this works, and sometimes it doesn’t. I just mash the toggle on and off and it inconsistently works, so I really don’t know what is causing that inconsistency. Any help would be greatly appreciated.

Thanks!

if the hyperlink didn’t work, again, my sketch is at p5.js Web Editor if you’d like to take a look at the code

2

I fixed it! Taking a look at this tutorial I was able to adapt it a bit to get it to work properly. Here’s what you do.

In setup(), of course you define the video and load it in, but you also need to define the playing.

In other words put this in setup

outline = createVideo(['assets/Plane_Test.mp4', 'assets/Plane_Test.webm']);
  outline.hide();
 outline.play();
  
  outline.noLoop();

then, in draw, if you remember I’m using a button toggle to play the video, and pause it on the end when it finishes, and reset the video, so that code looks like this:

if (button.val) { // toggle value is true
      image(outline, width/8,-100); // display the video
      outline.size(width/4 * 3,50); // resize it
      
      time = floor(outline.time()); // count the seconds
     
      if (time== 5){ // after 5 seconds or whatever the length is of your video
         outline.pause();
         
      }
   }
     if (button.isPressed){ // reset video on the press of the button
      outline.time(0);
      time = 0
      print("reset");
       outline.play();
    }

notice that outline.play() on the reset, that will start playing it again when you press the button again.

Hope this helps if you encounter this error as well!