How to handle "Uncaught (in promise) DOMException: play() failed because the user did not interact with the document first." on desktop using Chrome 66?

Question

I received an error message..

Uncaught (in promise) DOMException: play() failed because the user did not interact with the document first.

..When trying to play a video on desktop using Chrome version 66.

I did find an ad that automatically started playing on the site, but with the following HTML:

<video
    title="Advertisement"
    webkit-playsinline="true"
    playsinline="true"
    style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
    src="http://ds.serving-sys.com/BurstingRes/Site-2500/Type-16/1ff26f6a-aa27-4b30-a264-df2173c79623.mp4"
    autoplay=""></video>

Bypassing Chrome v66's autoplay blocker is really easy, just add webkit-playsinline="true", playsinline="true"autoplay="" attribute of the code> and elements? Will this have any negative consequences?

Answer 1

To make an html 5 element autoplay after the chrome 66 update, you can simply add the muted attribute to the video element.

So your current video HTML

<video
    title="Advertisement"
    webkit-playsinline="true"
    playsinline="true"
    style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
    src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
    autoplay=""></video>

Just needmuted="muted"

<video
    title="Advertisement"
    style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
    src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
    autoplay="true"
    muted="muted"></video>

I believe the chrome 66 update is trying to stop tabs from making random noise on user tabs. That's why the mute attribute makes autoplay work again.