js 监听video退出全屏

基础概念

在JavaScript中，监听视频元素退出全屏状态可以通过监听fullscreenchange事件来实现。当视频元素进入或退出全屏模式时，这个事件会被触发。

类型与应用场景

类型：这是一个事件监听的实现。
应用场景：适用于任何需要在视频播放器中管理全屏状态的场景，如在线教育平台、视频会议系统、媒体播放器等。

示例代码

以下是一个简单的示例，展示了如何监听视频元素退出全屏的事件，并在退出时打印一条消息到控制台：

// 获取视频元素
var video = document.getElementById('myVideo');

// 监听全屏变化事件
document.addEventListener('fullscreenchange', function () {
  // 检查当前是否处于全屏状态
  if (!document.fullscreenElement) {
    console.log('视频已退出全屏模式');
    // 在这里添加退出全屏后的操作
  }
});

// 视频元素的全屏方法（用于测试）
video.addEventListener('click', function () {
  if (video.requestFullscreen) {
    video.requestFullscreen();
  } else if (video.webkitRequestFullscreen) { // Chrome, Safari 和 Opera
    video.webkitRequestFullscreen();
  } else if (video.mozRequestFullScreen) { // Firefox
    video.mozRequestFullScreen();
  } else if (video.msRequestFullscreen) { // IE/Edge
    video.msRequestFullscreen();
  }
});