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即使在用户界面中也似乎使用了他们自己已弃用的mozRequestFullScreen API，因此，@ Sivaprasad的答案可以使用，但随时可能会发生变化，至少当前的Chrome不使用此API。

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

很好，让我们使用matchMedia()方法构建一个MediaQueryList，并监听其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>

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

JavaScript＆HTML-退出视频屏幕后停止背景音

2 个答案:

这个答案似乎有点错误...