JavaScript & HTML - Stop Background Sound after Video Screen is Exit

Question

I want to stop the video from playing the video background sound or stop the sounds it AFTER I exit the video screen.

Full screen

The bug right now is t

Answer 1

This answer seems actually a bit wrong...

Chrome does fire a webkitfullscreenchange event, so @Sivaprasad answer should work. Remember though that all this is not specified, so it may very well change in the future.

---

Previous answer, until OP reverts their accept-mark.

---

Since you are not using the DOM Fullscreen API, but the browser's UI controls, you can not rely on this API to behave correctly.
Current Firefox seems to use their own deprecated mozRequestFullScreen API even in their UI, so here, @Sivaprasad's answer would work, but it may very well change at any time and at least current Chrome does not use this API.

An other nice solution would have been to use a MediaQuery targeting the fullscreen state of the document, but there is no built-in media-query providing this info. However we can build one as such @media (device-width: 100vw) and (device-height: 100vh), which should work pretty well.

So that's fine, let's build a MediaQueryList using matchMedia() method, and listen for its change event.

That should have worked... but for whatever reasons, neither Chrome nor Firefox do trigger this change event, even though they both honor the query when set to CSS.

So this leads me to set up this horrible hack, where I will listen to the transitionend event of a dummy element, which will trigger when the above media query will get matched through CSS.
Yes, that's an hack.

// this should have worked...
const query = matchMedia('@media (device-width: 100vw) and (device-height: 100vh)');
query.onchange = e => {
  if (query.matches) console.log('entered FS');
  else console.log('exit FS')
}
//... but it doesn't

// so here is the hack...
let fs_elem = null;
myFSHack.addEventListener('transitionend', e => {
  const prev = fs_elem;
  fs_elem = document.querySelector(':fullscreen');
  if (!fs_elem && prev === myvid) {
    myvid.pause();
    console.log('exit fullscreen')
  }
})

#myFSHack {
  max-height: 0;
  transition: max-height .1s;
  display: inline-block;
  position: absolute;
  z-index: -1;
  pointer-events: none
}

@media (device-width: 100vw) and (device-height: 100vh) {
  #myFSHack {/* trigger the transition */
    max-height: 1px;
  }
}
:root,body{margin:0;}
video {max-width: 100vw;}

<span id="myFSHack"></span>
<h5>You may have to 'right-click'=>'fullscreen' if the standard icon doens't appear.</h5>
<video id="myvid" controls loop src="https://upload.wikimedia.org/wikipedia/commons/transcoded/a/a4/BBH_gravitational_lensing_of_gw150914.webm/BBH_gravitational_lensing_of_gw150914.webm.480p.webm"></video>

And as a fiddle for Chrome which does block the Fullscreen button in StackSNippet's iframes.

Answer 2

This worked for me

            document.addEventListener('fullscreenchange', exitHandler);
            document.addEventListener('webkitfullscreenchange', exitHandler);
            document.addEventListener('mozfullscreenchange', exitHandler);
            document.addEventListener('MSFullscreenChange', exitHandler);

            function exitHandler() {
                if (!document.fullscreenElement && !document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
                    video.pause();
                }
            }