Detect HTML video autoplay prevention

Question

Mobile browsers prevent video autoplay for understandable reasons. I have a video background on a site, so control buttons are out of question, but I thought that I could pop up window with some info and a button, where the user can accept the background video (triggering manual play) or not, and change it to some static pic.

So the question is: is there a way to tell if the autoplay was interrupted by the browser?

I tried onerror but it doesn't fire so I tried to onsuspend as well:

HTML:

<video id='bgvid' src='bgvid.mp4' type='video/mp4' autoplay loop onsuspend='video_suspended()'>

Javascript:

function video_suspended() {
    $bgvideoElement=$("#bgvid").get(0);
        //Check if reason for suspend was completion or browser interruption
        if($bgvideoElement.readyState<1) {
            //Here comes some pop-up window and a button to
            $bgvideoElement.play();
    } 
}

It works pretty well on tablet (Chrome), but on desktop (Chrome) onsuspendkeeps triggering infinitely (Firefox is alright though).

Any ideas on Chrome problem or any alternatives?

Answer 1

You can always test if current browser will run video.play() method. This method is asynchronous and returns response or error, https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play.

The algorithm of testing consists of checking if we got the error after trying to run .play().

export const checkUserAgentVideoAutoplay = async () => {
  const video = document.querySelector('#video-bg');

  try {
    await video.play();

    video.setAttribute('autoplay', true);

    console.log('video started playing successfully');
  } catch (err) {
    console.log(err, 'video play error');
    // do stuff in case your video is unavailable to play/autoplay
    // show user that video autoplay was aborted  
  }
}

This is what says the console in Safari, which refuses playing .webm video format

AbortError: The operation was aborted.
"video play error"