JavaScript& HTML - 视频屏幕退出后停止背景声音 [英] JavaScript & HTML - Stop Background Sound after Video Screen is Exit

问题描述

我希望停止视频播放视频背景音或在我退出视频屏幕后停止播放声音。

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

全屏

现在的错误是视频背景声音仍在播放我退出视频屏幕。所以我只想删除视频背景声音。

The bug right now is the video background sound is still playing right after I exit the video screen. so I just want to remove the video background sound.

这是我的视频

 <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

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';

推荐答案

这个答案实际上有点不对...

Chrome确实会触发 webkitfullscreenchange 事件，所以@Sivaprasad的答案应该有效。
请记住，所有这些都没有指定，所以将来可能会改变。

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.

之前的答案，直到OP恢复其接受标记。

Previous answer, until OP reverts their accept-mark.

因为你没有使用DOM 全屏API ，但浏览器的UI控件，你不能依靠这个API来正常运行。

目前的Firefox似乎s即使在他们的用户界面中也使用他们自己弃用的 mozRequestFullScreen API，所以在这里，@ Sivaprasad的答案会起作用，但它可能随时都会改变，至少目前的Chrome确实如此不要使用这个API。

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.

另一个不错的解决方案就是使用 MediaQuery 瞄准文档的全屏状态，但没有提供此信息的内置媒体查询。但是我们可以构建一个 @media（设备宽度：100vw）和（设备高度：100vh），这应该可以很好地工作。

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.

所以没关系，让我们使用 matchMedia（） 方法，并监听其更改事件。

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

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

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.

所以这导致我设置这个可怕的黑客，在那里我会听 transitionend 虚拟元素的事件，当上述媒体查询通过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>

作为Chrome的小提琴，它会阻止StackSNippet的iframe中的全屏按钮。

这篇关于JavaScript& HTML - 视频屏幕退出后停止背景声音的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！