JavaScript и HTML - Остановить фоновый звук после выхода из экрана видео

Question

Я хочу остановить воспроизведение видео на фоновом звуке видео или остановить его звуки ПОСЛЕ того, как я выхожу из экрана видео.

Полный экран

Ошибка сейчас в том, что фоновый звук видео все еще воспроизводится сразу после выхода из экрана видео. поэтому я просто хочу удалить фоновый звук видео.

вот мое видео

 <video oncontextmenu="return false;" src="../inflightapp/storage/app/public/series_videos/<?php echo ''.$row5['episode_video'].''; ?>" id="<?php echo ''.$row5['id'].'';?>" width="1px" controls controlsList="nodownload"></video>

Javascript

 var video = document.getElementById(title);   
    document.onkeypress = function(e){
        if((e || window.event).keyCode === 32){
            video.paused ? video.play() : video.pause();
        }
    };
    $('video.series-video').bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
    var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
    var event = state ? 'FullscreenOn' : 'FullscreenOff';

Answer 1

Этот ответ кажется немного неправильным ...

Chrome запускает событие webkitfullscreenchange, поэтому ответ @Sivaprasad должен работать. Помните, однако, что все это не указано, так что это может очень хорошо измениться в будущем.

---

Предыдущий ответ, пока OP не вернет свой знак подтверждения.

---

Поскольку вы не используете DOM Полноэкранный API , но пользовательский интерфейс браузера контролирует, вы не можете полагаться на этот API для правильного поведения.
Текущий Firefox, похоже, использует собственный устаревший mozRequestFullScreen API даже в своем пользовательском интерфейсе, поэтому здесь ответ @ Sivaprasad будет работать, но он может очень хорошо измениться в любое время, и по крайней мере текущий Chrome не использует этот API.

Другим хорошим решением было бы использование MediaQuery для полноэкранного состояния документа, но нет встроенного медиа-запроса, предоставляющего эту информацию. Тем не менее, мы можем построить один из них @media (device-width: 100vw) and (device-height: 100vh), который должен работать очень хорошо.

Итак, давайте создадим MediaQueryList, используя метод matchMedia(), и послушаем его событие change.

Это должно было сработать ... но по тем или иным причинам ни Chrome, ни Firefox не вызывают это событие изменения, даже если они оба удовлетворяют запросу при установке на CSS.

Так что это заставляет меня настроить этот ужасный хак, где я буду слушать событие transitionend элемента-пустышки, которое сработает, когда приведенный выше медиа-запрос будет согласован через CSS.
Да, это взлом.

// 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>

И в качестве скрипки для Chrome, который блокирует полноэкранную кнопку в фреймах StackSNippet.

Answer 2

Это сработало для меня

            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();
                }
            }