How to handle “Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first.” on Desktop with Chrome 66?

by

To make the autoplay on html 5 elements work after the chrome 66 update you just need to add the muted property 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 needs muted="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 creating random noise on the users tabs. That’s why the muted property make the autoplay work again.

More Related Contents:

  1. Retrieving HTML5 video duration separately from the file
  2. Programmatically play video with sound on Safari and Mobile Chrome
  3. Detect if HTML5 Video element is playing [duplicate]
  4. play pause html5 video javascript
  5. How to change the playing speed of videos in HTML5?
  6. HTML5 callbacks?
  7. HTML5 video – show/hide controls programmatically
  8. How can I set preview of video file, selecting from input type=’file’
  9. HTML5 Video – Percentage Loaded?
  10. HTML5 and Javascript to play videos only when visible
  11. Play HTML5 Video when scrolled to
  12. HTML5 Video: Streaming Video with Blob URLs
  13. Check whether user has a Chrome extension installed
  14. Cannot open local file – Chrome: Not allowed to load local resource
  15. Can you determine if Chrome is in incognito mode via a script?
  16. selectionStart/selectionEnd on input type=”number” no longer allowed in Chrome
  17. $ Variable (Dollar Sign) in Chrome?
  18. ES6 modules in local files – The server responded with a non-JavaScript MIME type
  19. Google Chrome “window.open” workaround?
  20. How to handle “Unchecked runtime.lastError: The message port closed before a response was received”?
  21. Connecting to DB from a Chrome Extension?
  22. Event onBrowserClose for Google Chrome Extension?
  23. Chrome sets cursor to text while dragging, why?
  24. Add to browser favorites/bookmarks from JavaScript but for all browsers (mine doesn’t work in Chrome)?
  25. Defer Attribute (Chrome)
  26. Select a printer and silently print
  27. Proper way to reset a GIF animation with display:none on Chrome
  28. Does chrome supports document.selection?
  29. Popstate on page’s load in Chrome
  30. Sorting an array of objects in Chrome

Leave a Comment