CODEWITHSUNDEEP
javascripthtmlvideobrowserautoplay
Kaka
Kaka

Reputation: 129

HTML5 Video autoplay with sound unmuted

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>

Upvotes: 9

Views: 39582

Answers (2)

Speeday
Speeday

Reputation: 73

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.

Upvotes: 0

Guy Nachshon
Guy Nachshon

Reputation: 2645

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

Upvotes: 6

Related Questions