如何使用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方法来检测全屏模式的任何变化，并使用布尔属性fullscreen来检查是否全屏屏幕模式当前处于开启或关闭状态。

这里有一个小小提琴来证明这一点：

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 的一部分，因此请务必检查它们的浏览器兼容性和未来支持。