CODEWITHSUNDEEP
htmlvideo
user2695578
user2695578

Reputation: 11

How to unmute HTML 5 video when clicking Full Screen mode

I have a HTML video that autoplays muted on entering the website, what I am trying to achieve is that when a user clicks the Full Screen button on the controls the video will go back to the beginning and play out loud, any ideas?

Upvotes: 1

Views: 19786

Answers (1)

Igor Gilyazov
Igor Gilyazov

Reputation: 777

I assume you have something like this:

<video autoplay muted controls ...>
  <source src="video.mp4" type="video/mp4">
  ...
</video>

What you need is fullscreenchange event handler:

var video = document.querySelector('video');
video.addEventListener(
  'fullscreenchange',
  function(e) {
    if (document.fullscreenEnabled) {
      video.muted = false;
      video.currentTime = 0;
    }
  }
);

For more information about Fullscreen API, check this page.

Note: keep in mind vendor specific prefixes.

Upvotes: 2

Related Questions