289

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:

<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>

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 <video> element? Are there any negative consequences to this?

3
  • 2
    I think playsinline is an iOS thing.
    – Josh Lee
    Commented Apr 19, 2018 at 23:00
  • 5
    @everyone: How is youtube able to bypass the "no userinteraction" rule?
    – nbar
    Commented Aug 27, 2021 at 12:00
  • 3
    This link may helpful developer.chrome.com/blog/autoplay
    – Carson
    Commented Jan 20, 2022 at 3:44

19 Answers 19

265

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.

9
  • 2
    Is there a way to enable audio right after the video starts playing? Removing the mute attribute or setting volume attribute doesn't help.
    – nikitahl
    Commented Feb 8, 2019 at 11:47
  • 7
    I had to do muted="true" instead
    – tgordon18
    Commented Mar 31, 2020 at 14:58
  • 1
    it's better to set muted=true OR muted=false
    – Panagiss
    Commented May 26, 2020 at 19:51
  • 4
    You can also just write muted works at least for me.
    – Black
    Commented Dec 10, 2020 at 15:59
  • 13
    I have this problem with <audio> element, how can I solve it ? Commented Jul 28, 2021 at 11:54
80

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();
}
8
  • 2
    Absolutely true and unbelievable, even with Ng8, latest Angular version. Angular simply doesn't care about what's going on component's HTML template! Commented Oct 22, 2019 at 12:35
  • 2
    And, with the new Angular's way of using @ViewChild() you need to set sttatic option to true: @ViewChild('videoPlayer', {static: true}) videoplayer: ElementRef; video: HTMLVideoElement; And then: this.video = this.videoplayer.nativeElement; @ ngOnInit() Commented Oct 22, 2019 at 12:58
  • 2
    This was my issue, muted in HTML is completely ignored and I had to force it by JS. + 1M to your answer after days searching Commented Jan 3, 2020 at 22:36
  • 2
    Wow, can't believe I actually needed the javascript-side muting for Angular SSR post-load views. This whole time, I thought the HTML was the problem.
    – arao6
    Commented Jun 9, 2020 at 22:44
  • This is only correct answer! Thank you, helped me a lot. Commented Feb 15, 2022 at 10:23
28

Try to use mousemove event listener

var audio = document.createElement("AUDIO")
document.body.appendChild(audio);
audio.src = "./audio/rain.m4a"

document.body.addEventListener("mousemove", function () {
    audio.play()
})
2
  • 6
    Doesn't work anymore in Chrome (tested against version 100.0.4896.127). Edit: mousemove works after performing a click once.
    – maryisdead
    Commented May 5, 2022 at 13:54
  • 4
    this answer took me on a wild ride
    – 55 Cancri
    Commented Sep 19, 2022 at 1:47
23

I got this error

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

And here's what I did in my Angular Project

Key Point: Don't ever assume a video will play, and don't show a pause button when the video is not actually playing.

You should always look at the Promise returned by the play function to see if it was rejected:

ngOnInit(): void{
    this.ensureVideoPlays();
}

private ensureVideoPlays(): void{
    const video = document.querySelector("video");

    if(!video) return;
    
    const promise = video.play();
    if(promise !== undefined){
        promise.then(() => {
            // Autoplay started
        }).catch(error => {
            // Autoplay was prevented.
            video.muted = true;
            video.play();
        });
    }
}

Source: Autoplay policy

2
  • 2
    elegant solution, very nice! Commented Apr 22, 2023 at 7:41
  • 2
    This is the correct answer as it actually handles the uncaught exception. Yes adding mute fixes it but you should still provide error handling then address playing it or not. Commented Oct 5, 2023 at 1:22
18

The best solution i found out is to mute the video

HTML

<video loop muted autoplay id="videomain">
  <source src="videoname.mp4" type="video/mp4">
</video>
0
17

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(_ => {
      // 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()

<!-- HTML -->
<audio id="MyAudioElement" autoplay>
  <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
  <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
2
  • 1
    This is a very clever approach, that does not break any policy (since playback does not start anyways), and prevents to have errors. +1 Commented Jun 25, 2020 at 18:57
  • Dito. Preventing errors and any policies was as well my goal. Any sound can wait till user interacts - just great!
    – TefoD
    Commented Aug 1, 2021 at 9:47
16

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

<video src="myvidwithsound.webm" autoplay=""></video>

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.

<video src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm" autoplay=""></video>

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 <video> or <audio> element from the user-event handler itself.

btn.onclick = e => {
  // mark our MediaElement as user-approved
  vid.play().then(()=>vid.pause());
  // now we can do whatever we want at any time with this MediaElement
  setTimeout(()=> vid.play(), 3000);
};
<button id="btn">play in 3s</button>
<video
  src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm" id="vid"></video>

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.

2
  • 1
    @JanTuroň no you can't. .play and .pause methods need to be called from the HTMLMediaElement instance directly, or you need to create a bound copy of the method, e.g vid.play.then(vid.pause.bind(vid)), which is not really easier to read than the simple vid.play.then(()=>vid.pause()).
    – Kaiido
    Commented Aug 27, 2020 at 14:41
  • Could you please check if things are still as you said? I am using chrome and nothing works as you said. For fiddle, I had to click inside the Iframe(not on the video) then "run" to play the video. And snippet is not working too. Commented Apr 13, 2022 at 15:50
10

In my case, I had to do this

 // Initialization in the dom
 // Consider the muted attribute
 <audio id="notification" src="path/to/sound.mp3" muted></audio>


 // in the js code unmute the audio once the event happened
 document.getElementById('notification').muted = false;
 document.getElementById('notification').play();
1
  • 4
    Não funciona testei no chrome Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first
    – Arg
    Commented Oct 18, 2020 at 22:11
10

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

<video id="video" src="./music.mp4" autoplay>

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

5

In my case it's just a click sound which is automatically invoked at the start (which I don't mind if it's silenced). So I use:

const clickSound = new Audio('click.wav');
clickSound.play().catch(function (error) {
    console.log("Chrome cannot play sound without user interaction first")});

to get rid of the error.

4

I had a similar problem, I need to play the video without muting it. The way i did this, wait for a second then triggered the event by button. Here is my code

if (playVideo == '1') {
    setTimeout(function() {
        $("#watch_video_btn").trigger('click');
    }, 1000);
}
1
  • Didn't work....
    – deFreitas
    Commented Jan 24, 2023 at 5:18
3

I changed my UI to have the user press a button to load the website (and when the website loads after they click the button, the audio plays)

Since they interact with the DOM, then the audio plays!!!

2
  • 1
    Sad story, same here.....
    – deFreitas
    Commented Jan 24, 2023 at 5:19
  • 1
    cool idea Jesus
    – Mustafa
    Commented May 25, 2023 at 22:46
2

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.

1

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

1

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.

1

You should have added muted attribute inside your videoElement for your code work as expected. Look bellow ..

<video id="IPcamerastream" muted="muted" autoplay src="videoplayback%20(1).mp4" width="960" height="540"></video>

Don' t forget to add a valid video link as source

0

There are some programmatic solutions for the issue to bypass the feature.

Some examples would be using Java's Robot or Autohotkey, as an another solution on top of the Chrome layer. But IMO it's not very smart. So my favorite workaround for the issue (although a little tricky) is using chrome.debugger's Input.dispatchMouseEvent API from Chrome Extension API.

var __target = 1857385916; // -- replace here with the tab id you desire

var x = 360 // -- replace here with your desired position to emulate click
var y = 360 // -- here as well
var button = "right"
var clickCount = 1

chrome.debugger.sendCommand({ tabId: __target }, 'Input.dispatchMouseEvent', {
    type: 'mousePressed',
    x: x,
    y: y,
    button: button,
    clickCount: clickCount,
}, () => {
  chrome.debugger.sendCommand({ tabId: __target }, 'Input.dispatchMouseEvent', {
    type: 'mouseReleased',
    x: x,
    y: y,
    button: button,
    clickCount: clickCount,
  })
});

Notes for beginners:

Create a Chrome extension with background.js created as the above script, and manifest.json created with debugger permission enabled of course.

Chrome's menu -> "Manage Extensions" -> "Developer mode" enabled -> "load unpacked" to load the extension, as usual.

You may want to know the tab id for your desired tab to emulate a mouse event on. The following script I made might be helpful for quickly identify id of each tab.

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    if (changeInfo.status === "complete" && tab.active && tab.url) {
        var obj = {
            tabId: tabId,
            title: tab.title,
            url: tab.url,
        }
        console.log("[(background) tab id logger]", obj, );
    }
});

Add "tabs" permission to the manifest.json, reload the extension, click "background page" to open the background script inspection window, paste the above JavaScript script on the console to run the script. If you don't see any error, reload any tab, you would quickly see the tab id for the tab on the console logged.

-1
  1. Open chrome://settings/content/sound
  2. Setting No user gesture is required
  3. Relaunch Chrome
14
  • 6
    Autoplay Policy Changes. Click me
    – Ming
    Commented May 10, 2018 at 1:32
  • 5
    It only use for developer to test Chrome autoplay policy behaviour locally. developers.google.com/web/updates/2017/09/… Commented May 21, 2018 at 3:20
  • 11
    I found that the command line flag --autoplay-policy=no-user-gesture-required is the programmatic way to achieve this setting. Commented Jun 11, 2018 at 18:07
  • 55
    This only works for your browser, everybody else will still be affected
    – koosa
    Commented Oct 9, 2018 at 4:30
  • 95
    Who is upvoting this answer? This is not superuser.com. A solution for your local machine cannot be an acceptable answer.
    – adripanico
    Commented Feb 1, 2019 at 8:57
-9

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 "No user gesture is required"

Relaunch Chrome and you don't have to change any code

3
  • 35
    You can't possibly ask each and every user to go an change the settings .
    – DesTroy
    Commented May 14, 2018 at 10:18
  • 2
    This could solve the issue for some people actually (kiosks, private and local websites...), but the flag was removed in Chrome 76. Now the only solution is this answer Commented Aug 19, 2019 at 21:47
  • @DesTroy your comment doesn't make sense. If Chrome is not allowing you to autoplay video/audio without the user having initially requested/allowed it, it's for a good reason! For the simple reason that it is a BAD IDEA to allow that for every user (that would make bad intentioned people to use that to their advantage and play something on page load and that would quickly get annoying for everyone). Then yes if you really want to activate this feature it's only for yourself hence having to go deeper and activate a flag. That guy solution was legit.
    – vdegenne
    Commented Jan 16, 2023 at 15:37

Not the answer you're looking for? Browse other questions tagged or ask your own question.