7

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>
Kaka
  • 109
  • 1
  • 1
  • 4

2 Answers2

4

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

Guy Nachshon
  • 2,411
  • 4
  • 16
  • Can you explain what 'Top frames can delegate autoplay permission to their iframes to allow autoplay with sound' means? And how can I use it, or an example if possible, Thanks – Kaka Jan 15 '22 at 09:32
  • Or is there any way to fake the first interaction with the browser to make my video autoplay with sound ? – Kaka Jan 15 '22 at 09:34
  • it means that if you have another frame that received authorization from the user (i.e was unmuted), it will pass on to the next frames (if you tell it to do so). – Guy Nachshon Jan 15 '22 at 11:33
  • i've edited my answer and added a solution :) – Guy Nachshon Jan 15 '22 at 11:50
  • Sorry for being annoying! Do you have any working examples like Pen, Fiddle, or any other model to try its code? – Kaka Jan 15 '22 at 13:45
  • i added a code snippet in the comment :) but i believe that it is still not supported by all browsers and the first solution is better – Guy Nachshon Jan 15 '22 at 14:24
  • Does anyone know if this can be bypassed in an Electron app, for example? – Urb Gim Tam Feb 03 '23 at 16:01
  • 1
    @UrbGimTam - You should be able to achieve this by bypassing the autoplay policy: `app.commandLine.appendSwitch("autoplay-policy", "no-user-gesture-required")` – Guy Nachshon Feb 04 '23 at 07:50
  • 1
    @GuyNachshon Why can you not use regular quotes? `"` instead of `”` or `″`. – Ben the Coder Mar 30 '23 at 20:45
  • @BentheCoder what do you mean? – Guy Nachshon Apr 03 '23 at 11:02
  • 1
    @GuyNachshon I believe you are using italicized quotes, or something that's not the "standard" ones. HTML doesn't understand these, so it makes the code invalid. I can edit your post if you like so it uses "standard" quotes. – Ben the Coder Apr 03 '23 at 14:33
  • @BentheCoder oh, tnx! fixed it – Guy Nachshon Apr 09 '23 at 14:06
0

Thanks for Sharing about Interaction of User to be needed as Mandatory to have unmuted features with AutoPlay.

So please check below code to find an trick to Auto Play any Video with Unmute Way.

Here is an Demo Link of Below Code:- https://codepen.io/speeday/pen/dyQYLEO

HTML Code

<video
    id="video"
    width="320"
    height="240"
    autoplay
    muted
>
    <source src="http://html5demos.com/assets/dizzy.mp4" type="video/mp4" />
      Your browser does not support the video tag.
</video>

<button type="button" onclick="showVideo()" id="button">Click Me</button>

JS Code

/* Toggle Button to Unmute the Video */

function toggleMute() {
    var video = document.getElementById('video');
    if (video.muted) {
        video.muted = false;
    } else {
        video.muted = true;
    }
}

/* Delay Function to Add SetTimeOut After Defined Interval */

function delay(time) {
    return new Promise((resolve) => setTimeout(resolve, time));
}

/* Show Video Function to Add Display Property to Show the Video on Click of Button which will fulfilled User Interaction Needs to Browser to Run the Video with Unmute State */

function showVideo() {
    var element = document.getElementById('video');
    var button = document.getElementById('button');
    element.style.display = 'block';
    button.style.display = 'none';
    delay(100).then(() => toggleMute());
}

CS Code

/* Added PseudoCode CSS to Hide the Controls of Video as on adding Controls Attribute to Video, the controls of video get visible easily. So to control that case also, this needs to be present on CSS End */

video::-webkit-media-controls {
    display: none;
}

video {
  display: none;
  pointer-events: none;
}

By using User Interaction in this way, Allow Video to get play easily.

Hope it works for you.

Speeday
  • 63
  • 8