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

这对我有用

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

Answer 2

这个答案好像有点不对……

Chrome 确实会触发 webkitfullscreenchange 事件，因此 @Sivaprasad 的答案应该有效。 请记住，虽然这一切都没有具体说明，但将来很可能会发生变化。

---

上一个答案，直到 OP 恢复他们的接受标记。

---

由于您使用的不是 DOM Fullscreen API，而是浏览器的 UI 控件，因此您不能依赖此 API 来正常运行。
当前的 Firefox 似乎甚至在他们的 UI 中使用了他们自己已弃用的 mozRequestFullScreen API，所以在这里，@Sivaprasad 的答案会起作用，但它可能随时会发生变化，至少当前的 Chrome 不使用这个 API。

另一个不错的解决方案是使用MediaQuery 定位文档的全屏状态，但没有提供此信息的内置媒体查询。但是我们可以构建一个这样的@media (device-width: 100vw) and (device-height: 100vh)，它应该工作得很好。

没关系，让我们使用matchMedia() 方法构建一个MediaQueryList，并监听它的更改事件。

这应该可以工作...但无论出于何种原因，Chrome 和 Firefox 都不会触发此更改事件，即使它们在设置为 CSS 时都支持查询。

所以这导致我设置了这个可怕的 hack，我将在其中监听一个虚拟元素的 transitionend 事件，当上述媒体查询通过 CSS 匹配时将触发该事件。
是的，这是一个 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.