HTML5全屏API可通过JavaScript直接调用，需先检测浏览器支持情况，使用requestFullscreen及带前缀方法让元素全屏，调用exitFullscreen退出，并监听fullscreenchange事件获取状态变化，注意兼容性和用户交互触发限制。

HTML5全屏API（Fullscreen API）允许开发者让网页中的某个元素进入全屏模式，提升用户体验，常用于视频播放、游戏或演示页面。使用这个API不需要引入额外库，直接通过JavaScript调用即可。

1. 判断浏览器是否支持全屏API

在调用全屏功能前，最好先检测当前浏览器是否支持。可通过检查元素是否存在requestFullscreen方法来判断：

• element.requestFullscreen() 是标准方法
• 部分浏览器仍需使用前缀，如：webkitRequestFullscreen（Chrome, Safari）、mozRequestFullScreen（Firefox）

示例代码：

if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
} else {
  alert("当前浏览器不支持全屏API");
}

2. 让元素进入全屏模式

选择一个DOM元素（如div、video等），调用其全屏请求方法即可进入全屏。

HTML结构示例：

这是一个可以全屏的区域
进入全屏

JavaScript实现：

function openFullscreen() {
  const elem = document.getElementById("content");
  if (elem) {
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.webkitRequestFullscreen) {
      elem.webkitRequestFullscreen();
    } else if (elem.mozRequestFullScreen) {
      elem.mozRequestFullScreen();
    } else if (elem.msRequestFullscreen) {
      elem.msRequestFullscreen();
    }
  }
}

3. 退出全屏模式

可以通过document.exitFullscreen()退出全屏状态。

添加退出按钮：

退出全屏

JavaScript代码：

function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}

4. 监听全屏状态变化

可以监听fullscreenchange事件，判断当前是否处于全屏状态。

document.addEventListener("fullscreenchange", () => {
  if (document.fullscreenElement) {
    console.log("已进入全屏");
  } else {
    console.log("已退出全屏");
  }
});

注意：带前缀的事件名也需兼容，例如webkitfullscreenchange、mozfullscreenchange。

完整监听示例：

document.addEventListener("fullscreenchange", handleScreenChange);
document.addEventListener("webkitfullscreenchange", handleScreenChange);
document.addEventListener("mozfullscreenchange", handleScreenChange);
document.addEventListener("msfullscreenchange", handleScreenChange);

function handleScreenChange() {
  const isFullscreen = document.fullscreenElement ||
                       document.webkitFullscreenElement ||
                       document.mozFullScreenElement ||
                       document.msFullscreenElement;
  console.log(isFullscreen ? "全屏中" : "非全屏");
}

基本上就这些。只要注意浏览器兼容性和用户交互触发限制（全屏操作必须由用户手势如点击触发），就能顺利实现全屏功能。不复杂但容易忽略细节。