Home > Web Front-end > JS Tutorial > How to Play Videos Automatically in Chrome 66 without User Interaction?

How to Play Videos Automatically in Chrome 66 without User Interaction?

Linda Hamilton
Release: 2024-11-17 11:55:02
Original
356 people have browsed it

How to Play Videos Automatically in Chrome 66 without User Interaction?

How to handle "Uncaught (in promise) DOMException: play() failed because the user has not interacted with the document before."

Using Chrome 66 When playing a video on the desktop version, I encountered the error message:


Uncaught (in promise) DOMException: play() Playback failed because the user has not interacted with the document before.


When trying to use the following HTML When playing a video on the desktop, I found an auto-playing advertisement:

<video</p><pre class="brush:php;toolbar:false">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></p>
<p>

So, Do I just need to add webkit-playsinline="true", playsinline="true" and autoplay="" to the

Answer

To make an HTML 5 element autoplay after the Chrome 66 update, simply add the muted attribute to the video element.

So the previous video HTML becomes:

<video</p><pre class="brush:php;toolbar:false">title="Advertisement"
webkit-playsinline="true"
playsinline="true"
muted
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></p>
<p>

The above is the detailed content of How to Play Videos Automatically in Chrome 66 without User Interaction?. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template