How to Fix Chrome\'s \'play() failed because the user didn\'t interact with the document first\' Autoplay Error?

Handling the "Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first" Error in Chrome 66 for Desktop

When attempting to play video on desktop using Chrome version 66, users may encounter the following error message:

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

This error arises from Chrome's new autoplay blocker, which restricts automatic video playback without user interaction. To bypass this restriction, simply adding the following attributes to the

• webkit-playsinline="true"
• playsinline="true"
• autoplay=""

Solution

To enable autoplay in Chrome 66 for desktop, the muted attribute must be added to the video element. This property ensures that the video starts playing silently, effectively meeting the user interaction requirement set by Chrome.

Updated Video HTML

<video
    title="Advertisement"
    webkit-playsinline="true"
    playsinline="true"
   >

Consequences of Using the "muted" Attribute

Using the muted attribute has the following consequences:

• The video will automatically play without user interaction.
• The audio output will be muted.
• Users will still need to interact with the video (e.g., toggle the volume or remove the mute) to hear the audio.

This approach allows for autoplay while still providing users with the necessary control over audio playback, thus mitigating the potential negative consequences associated with unmuted autoplay.

The above is the detailed content of How to Fix Chrome's 'play() failed because the user didn't interact with the document first' Autoplay Error?. For more information, please follow other related articles on the PHP Chinese website!