javascript - 如何使用 javascript/jquery 检测视频何时退出全屏模式

Question

我有一个视频已上传到我的 html 页面，在 javascript 的帮助下，我可以通过单击按钮将视频全屏显示。当这种情况发生时，我可以毫无问题地检测到它。

以下代码允许我在单击按钮时将视频全屏显示:

//这里是 html 格式的视频

  <video controls id="myvideo">
      <source src="/videoPlays.mp4" type="video/mp4"></source>
  </video> 

//这里的 javascript/jquery 代码用于激活全屏模式并播放视频

$("#BtnPlayVideo").click(VideoPlay);

function VideoPlay() {
  var elem = document.getElementById("myvideo");
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
    $('#myvideo')[0].play();
  } else if (elem.mozRequestFullScreen) {
    elem.mozRequestFullScreen();
    $('#myvideo')[0].play();
  } else if (elem.webkitRequestFullscreen) {
    elem.webkitRequestFullscreen();
    $('#myvideo')[0].play();
  } else if (elem.msRequestFullscreen) {
    elem.msRequestFullscreen();
    $('#myvideo')[0].play();
  }
}

我想要做的是检测用户何时按下按钮离开全屏模式并在那一刻停止视频。 您可以给我任何想法或帮助来实现这一目标吗？

Answer 1

如果您正在使用 requestFullscreen 切换到全屏模式，那么您还可以监听 fullscreenchange 方法来检测全屏模式中的任何更改并使用 bool 属性 fullscreen 用于检查全屏模式当前是否打开或关闭。

这里有一个小 fiddle 来表明:

https://jsfiddle.net/4z8w720a/1/

document.addEventListener("fullscreenchange", function() {
  if (document.fullscreen) {
    console.log('Entering Full Screen Toggle');
  } else {
    console.log('Exiting Full Screen Toggle');
  }
});

P.S.:这些是实验性 API 的一部分，因此请检查它们的浏览器兼容性和 future 的支持。