HTML5怎么实现全屏功能_HTML5全屏API使用教程-html教程-PHP中文网

HTML5怎么实现全屏功能_HTML5全屏API使用教程

爱谁谁

发布： 2025-10-28 22:44:01

原创

243人浏览过

HTML5全屏API可通过调用元素的requestFullscreen方法实现全屏，需兼容不同浏览器前缀，并由用户操作触发，配合exitFullscreen退出及fullscreenchange监听状态。

html5怎么实现全屏功能_html5全屏api使用教程

HTML5 提供了全屏 API（Fullscreen API），可以让网页中的元素（如视频、图片、游戏画布等）进入全屏模式，提升用户体验。这个功能在视频播放器、在线游戏和演示页面中非常实用。下面详细介绍如何使用 HTML5 全屏 API 实现全屏功能。

检测浏览器支持情况

由于不同浏览器对全屏 API 的实现略有差异，使用前应先检测是否支持。可以通过检查 DOM 元素上是否存在 requestFullscreen 方法来判断：

现代标准方法：element.requestFullscreen()
Chrome 和旧版 Safari：element.webkitRequestFullscreen()
Firefox：element.mozRequestFullScreen()
IE/Edge 旧版本：element.msRequestFullscreen()

示例代码：

if (element.requestFullscreen) {
  element.requestFullscreen();
} else if (element.webkitRequestFullscreen) {
  element.webkitRequestFullscreen();
} else if (element.mozRequestFullScreen) {
  element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
  element.msRequestFullscreen();
}

登录后复制

让元素进入全屏模式

调用目标元素的请求全屏方法即可进入全屏。比如让一个 div 或 video 元素全屏显示：

立即学习“前端免费学习笔记（深入）”；

const elem = document.getElementById('myVideo');
<p>function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /<em> Safari </em>/
elem.webkitRequestFullscreen();
} else if (elem.mozRequestFullScreen) { /<em> Firefox </em>/
elem.mozRequestFullScreen();
} else if (elem.msRequestFullscreen) { /<em> IE11 </em>/
elem.msRequestFullscreen();
}
}

登录后复制

然后通过按钮触发：

<button onclick="openFullscreen()">进入全屏</button>

登录后复制

退出全屏模式

可以使用 document.exitFullscreen() 方法退出全屏状态：

智谱清言 - 免费全能的AI助手

查看详情

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

登录后复制

添加退出按钮：

<button onclick="closeFullscreen()">退出全屏</button>

登录后复制

监听全屏状态变化

通过监听 fullscreenchange 事件，可以知道当前是否处于全屏状态：

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

登录后复制

注意：各浏览器前缀不同，需兼容：