Bypassing chrome autopause on videos with sound?

Question

I have a website set-up, where the background is a YouTube video using Tubular.js plugin. There is a problem with chrome browsers, that auto pauses the youtube video if I load it with mute: false flag. Chrome is the only offender, as it works with opera, firefox etc. If I change the flag to mute: true the video will atuplay fine.

Chrome recently started to block atuplayed videos with sound. Is there an option to bypass this on chrome, or at least modify the tubular.js library/js call so that it will only mute (regardless of settings) on chrome user-agents?

https://codepen.io/anon/pen/MGEZrO

Thanks in advance

Answer 1

According to chrome logic it is impossible to autoplay video if it is NOT muted. However they allow to autoplay video if it is muted and WILL NOT stop it if user will unmute it. By this (user interaction) chrome means just a single tap OR click by the user on the website (everywhere, not video components only).

Just make your user to make a single click on your webpage and THEN you can mount/start video with autoplay and sound.

I have the similar situation with my react spa. And I force my user to make a single click before mounting the video. Only this way it starts to play with sound.

I also had the situation where the video MUST have started even without click and the I just addEventListener on whole page to unmute it as soon as possible

play(from = null) {
  document.addEventListener('click', () => {
  // any click will force my video to unmute
  this.player.muted = false; 
  });
  // rest code for updating state etc
}

Unfortunately, triggering click is not working (the video will stop automatically)