I need to implement a local autoplay video on my website. Still, I knew that newer browsers, i.e., Chrome, Mozilla, and Safari, have blocked autoplay when the video has no 'muted' attribute. So, Is there any way to autoplay the video unmuted(with sound) in HTML5 by any trick in HTML or Javascript? Since, When I remove the 'muted' attribute, The video stops from autoplay by the Browser.
Here is the simple HTML5 code I use:
<body>
<div class="video-wrapper">
<video autoplay muted loop playsinline preload="metadata">
<source src="EDMVideo(Jay)_NEW.webm">
</video>
</div>
</body>
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>
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):
you can read more about it here