How to handle Uncaught in promise DOMException play failed because the user didn t interact with the document first on Desktop with Chrome 66

Question

I m getting the error message       Uncaught  in promise  DOMException  play   failed because the user didn t interact with the document first      when trying to play video on desktop using Chrome version 66   I did find an ad that began playback automatically on a website however using the following HTML    lt 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    gt  lt  video gt    So is by-passing Chrome v66 s autoplay blocker really as easy as just adding the webkit-playsinline  true   playsinline  true   and autoplay    attributes to the  lt video gt  element  Are there any negative consequences to this

User · Answer

Chrome needs a user interaction for the video to be autoplayed or played via js  video play     But the interaction can be of any kind  in any moment  If you just click random on the page  the video will autoplay  I resolved then  adding a button  only on chrome browsers  that says  enable video autoplay   The button does nothing  but just clicking it  is the required user interaction for any further video

User · Answer

Open chrome   settings content sound Setting No user gesture is required Relaunch Chrome

User · Answer

In my case  I had to do this      Initialization in the dom     Consider the muted attribute   lt audio id  notification  src  path to sound mp3  muted gt  lt  audio gt        in the js code unmute the audio once the event happened  document getElementById  notification   muted   false   document getElementById  notification   play

User · Answer

Type Chrome   flags in the address-bar Search  Autoplay  Autoplay Policy Policy used when deciding if audio or video is allowed to autoplay      Mac  Windows  Linux  Chrome OS  Android  Set this to  quot No user gesture is required quot  Relaunch Chrome and you don t have to change any code

User · Answer

According to the new browser policy  the user must interact with DOM first before playing the Audio element  If you want to play the media on page load then you can simply add autoplay property to audio element in HTML like this  lt video id  quot video quot  src  quot   music mp4 quot  autoplay gt  or if you don t want to do autoplay then you can handle this using Javascript  Since the autoplay property is set to true  media will be played  we can simply mute the media  document getElementById  video   autoplay   true  document getElementById  video   muted   true    Imp  Now Whenever you play the media don t forget to turn the muted property to false  Like this document getElementById  video   muted   false   document getElementById  video   play     Or you can also show a simple popup where the user will click the allow button in the modal  So he interacts with DOM first  then you don t need anything to do

User · Answer

For me  in Angular project  this code helped   In HTML  you should add autoplay muted  In JS TS  playVideo         const media   this videoplayer nativeElement      media muted   true     without this line it s not working although I have  muted  in HTML     media play

User · Answer

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    x000D   x000D   lt video x000D      title  Advertisement  x000D      webkit-playsinline  true  x000D      playsinline  true  x000D      style  background-color  rgb 0  0  0   position  absolute  width  640px  height  360px   x000D      src  http   commondatastorage googleapis com gtv-videos-bucket sample BigBuckBunny mp4  x000D      autoplay    gt  lt  video gt  x000D   x000D   x000D    Just needs muted  muted    x000D   x000D   lt video x000D      title  Advertisement  x000D      style  background-color  rgb 0  0  0   position  absolute  width  640px  height  360px   x000D      src  http   commondatastorage googleapis com gtv-videos-bucket sample BigBuckBunny mp4  x000D      autoplay  true  x000D      muted  muted  gt  lt  video gt  x000D   x000D   x000D    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

User · Answer

The best solution i found out is to mute the video  HTML   lt video loop muted autoplay id  videomain  gt     lt source src  videoname mp4  type  video mp4  gt   lt  video gt

User · Answer

You should have added muted attribute inside your videoElement for your code work as expected  Look bellow      lt video id  IPcamerastream  muted  muted  autoplay src  videoplayback 20 1  mp4  width  960  height  540  gt  lt  video gt    Don  t forget to add a valid video link as source

User · Answer

I encountered a similar error with while attempting to play an audio file  At first  it was working  then it stopped working when I started using ChangeDetector s markForCheck method in the same function to trigger a re-render when a promise resolves  I had an issue with view rendering    When I changed the markForCheck to detectChanges it started working again  I really can t explain what happened  I just thought of dropping this here  perhaps it would help someone

User · Answer

Answering the question at hand    No it s not enough to have these attributes  to be able to autoplay a media with audio you need to have an user-gesture registered on your document   But  this limitation is very weak  if you did receive this user-gesture on the parent document  and your video got loaded from an iframe  then you could play it     So take for instance this fiddle  which is only   lt video src  myvidwithsound webm  autoplay    gt  lt  video gt    At first load  and if you don t click anywhere  it will not run  because we don t have any event registered yet  But once you click the  Run  button  then the parent document  jsfiddle net  did receive an user-gesture  and now the video plays  even though it is technically loaded in a different document   But the following snippet  since it requires you to actually click the Run code snippet button  will autoplay    x000D   x000D   lt video src  https   upload wikimedia org wikipedia commons transcoded 2 22 Volcano Lava Sample webm Volcano Lava Sample webm 360p webm  autoplay    gt  lt  video gt  x000D   x000D   x000D    This means that your ad was probably able to play because you did provide an user-gesture to the main page     Now  note that Safari and Mobile Chrome have stricter rules than that  and will require you to actually trigger at least once the play   method programmatically on the  lt video gt  or  lt audio gt  element from the user-event handler itself    x000D   x000D  btn onclick   e   gt    x000D       mark our MediaElement as user-approved x000D    vid play   then     gt vid pause     x000D       now we can do whatever we want at any time with this MediaElement x000D    setTimeout     gt  vid play    3000   x000D     x000D   lt button id  btn  gt play in 3s lt  button gt  x000D   lt video x000D    src  https   upload wikimedia org wikipedia commons transcoded 2 22 Volcano Lava Sample webm Volcano Lava Sample webm 360p webm  id  vid  gt  lt  video gt  x000D   x000D   x000D    And if you don t need the audio  then simply don t attach it to your media  a video with only a video track is also allowed to autoplay  and will reduce your user s bandwidth usage

User · Answer

Try to use mousemove event lisentner  var audio   document createElement  AUDIO   document body appendChild audio   audio src      audio rain m4a   document body addEventListener  mousemove   function          audio play

User · Answer

Extend the DOM Element  Handle the Error  and Degrade Gracefully  Below I use the prototype function to wrap the native DOM play function  grab its promise  and then degrade to a play button if the browser throws an exception  This extension addresses the shortcoming of the browser and is plug-n-play in any page with knowledge of the target element s       JavaScript    Wrap the native DOM audio element play function and handle any autoplay errors Audio prototype play    function play    return function        var audio   this        args   arguments        promise   play apply audio  args     if  promise     undefined        promise catch     gt             Autoplay was prevented  This is optional  but add a button to start playing        var el   document createElement  button          el innerHTML    Play         el addEventListener  click   function   play apply audio  args            this parentNode insertBefore el  this nextSibling                    Audio prototype play       Try automatically playing our audio via script  This would normally trigger and error  document getElementById  MyAudioElement   play     lt  -- HTML -- gt   lt audio id  MyAudioElement  autoplay gt     lt source src  https   www w3schools com html horse ogg  type  audio ogg  gt     lt source src  https   www w3schools com html horse mp3  type  audio mpeg  gt    Your browser does not support the audio element   lt  audio gt

User · Answer

I had some issues playing on Android Phone  After few tries I found out that when Data Saver is on there is no auto play   There is no autoplay if Data Saver mode is enabled  If Data Saver mode is enabled  autoplay is disabled in Media settings   Source

[javascript] How to handle "Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first." on Desktop with Chrome 66?

Examples related to javascript

Examples related to google-chrome

Examples related to video

Examples related to html5-video