Autoplay + muted does not autoplay the video on chrome

[Romain-BASE-GVA]

I've got a warning message in the console: plyr.js:619 Unmuting failed and the element was paused instead because the user didn't interact with the document before.

the regular version (hml5), works

js:

const player = new Plyr('#player', { muted: true });

here is the codepen: https://codepen.io/romaingranai/pen/WNpRxEE

Everything seems to work just fine on firefox and safari! Any clue, are you able to redirect me on another issue if it has already posted and fixed?

[JayGeorge]

Different browsers have different policies for muting. Chrome even has a scoring system to allow autoplay. The error message you're seeing is the browser telling you that the user hasn't interacted with the video so it's unwilling to change the state of it.

[rohitcoder]

@JayGeorge is there any workaround for this?

[JayGeorge]

You can't unmute a video automatically. You should be able to mute + autoplay though. I recommend you test this in Chrome in a new private/incognito window every time otherwise you may see inconsistent results due to their scoring system mentioned above.

A separate issue is with Vimeo by the way, just in case you're running into that—for which there's a solution here

[KarlBishop]

I've also been having issues with Autoplaying + muted.

Chrome's autoplay policy says "Muted autoplay is always allowed" and it works fine when I use the native video player instead of loading Plyr. So it seemed like Plyr was doing something that makes the video appear as unmuted and triggers the MEI evaluation.

When I outputted the values of my options immediately after loading, I found they do not all seem to be picked up:

const player = new Plyr('video', {
  autoplay: true,
  muted: true,
  volume: 0
});
console.log(player.autoplay); // true
console.log(player.muted);    // false
console.log(player.volume);   // 1

So I tried setting them after initialisation and explicitly calling play() and this works for me:

const player = new Plyr('video', {
  // whatever
});
player.muted = true;
player.volume = 0;
console.log(player.muted);    // true
console.log(player.volume);   // 0
player.play();                // the video starts playing