HTML5 Video autoplay with sound unmuted

edit

adding a “hacky” solution:
Basically what the policy means is that a user must interact with the site before audio can play.

with this assumption, we can autoplay video with sound in two ways:

the first one, and the fairest one to the user, is to create a landing page when in it he has to interact with your site to begin using it or to click on something that says that he allows you to play sound.

the second one (and the a bit more ‘hacky’ one) is to add an invisible iframe with a .mp3 file (that will be silent) and allow autoplay. this will trick the browser to autoplay any subsequent video even if it’s unmuted.

it will look like this:

<iframe src="https://olafwempe.com/mp3/silence/silence.mp3" type="audio/mp3" allow="autoplay" id="audio" style="display:none"></iframe>
<video autoplay muted loop playsinline preload="metadata">
  <source src="EDMVideo(Jay)_NEW.webm">
</video>

For Electron – you need to bypass autoplay policy:

  app.commandLine.appendSwitch("autoplay-policy", "no-user-gesture-required")

Unfortunately, there is no real solution for this. it is aimed to protect the user and there is no workaround for that.
There are some browsers where autoplaying with sound does work. but for most of them it won’t work, and that is GOOD!.

since April 2018 you cannot autoplay with sound on chrome unless one of the following is happening (as seen on google’s autoplay policy):

  • Muted autoplay is always allowed.
  • Autoplay with sound is allowed if:
    • User has interacted with the domain (click, tap, etc.).
    • On desktop, the user’s Media Engagement Index threshold has been
      crossed, meaning the user has previously played a video with sound.
    • On mobile, the user has added the site to his or her home screen.
    • Top frames can delegate autoplay permission to their iframes to allow
      autoplay with sound.

you can read more about it here

Leave a Comment