How to handle "Uncaught (in promise) DOMException: play() failed because the user did not interact with the document first." on desktop using Chrome 66?
P粉651109397
2023-08-23 19:57:46
<p>I received an error message..</p>
<blockquote>
<p>Uncaught (in promise) DOMException: play() failed because the user did not interact with the document first. </p>
</blockquote>
<p>..When trying to play a video on desktop using Chrome version 66. </p>
<p>I did find an ad that automatically started playing on the site, but with the following HTML: </p>
<pre class="brush:php;toolbar:false;"><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></pre>
<p>Bypassing Chrome v66's autoplay blocker is really easy, just add <code>webkit-playsinline="true"</code>, <code>playsinline="true"</ The >autoplay="" attribute of the code> and <code <code=""><video></video></code> elements? Will this have any negative consequences? </p>
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
Just need
muted="muted"
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.