How to determine if user interacted with document to start video?

Question

I encounter an error trying to autoplay video in Chrome, which says: DOMException: play() failed because the user didn't interact with the document first.

There is a solution for that for 'normal' pages:

var promise = document.querySelector('video').play();
if (promise !== undefined) {
  promise.then(_ => {
    // Autoplay started!
  }).catch(error => {
    // Autoplay was prevented.
    // Show a "Play" button so that user can start playback.
  });
}

But I play video using Phaser framework Video object, which doesn't return promise, so I need to determine it user has interacted with the page before trying to play video. Is there any solution for that?

Answer 1

Look for user interaction with the window

var interacted = false;
function fun(){
   interacted = true;
   $(window).unbind("scroll");
   $(window).unbind("click");
   play();
}
$(window).bind("scroll click", fun);
function play(){
     if(interacted){
        //play audio or video
     }
}