HTML5全屏API使用详解

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《HTML5全屏API使用教程》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

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

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

检测浏览器支持情况

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

示例代码：

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();
}
}</p>

然后通过按钮触发：

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

退出全屏模式

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

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('已退出全屏');
  }
});

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

注意事项与限制

全屏 API 使用有一些安全和体验上的限制：

基本上就这些。掌握 Fullscreen API 后，你可以为视频播放、PPT 展示或小游戏添加沉浸式体验。虽然有浏览器兼容问题，但通过加前缀和判断基本可以覆盖主流环境。不复杂但容易忽略细节。

本篇关于《HTML5全屏API使用详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！