本文主要介绍了HTML5的全屏幕（全屏）详细的API。本文从全屏模式和退出全屏模式的实例代码，并解释全屏属性和事件。你需要的朋友可以参考一下。





在更现实的Web应用程序中，Javaｓｃｒｉｐｔ变得越来越令人敬畏。

全屏API是一个新的Javaｓｃｒｉｐｔ API。它简单而有力。全屏允许我们请求全屏幕显示的用户通过编程。如果交互完成，它可以随时退出全屏。

在线演示：全屏API的例子

（在这个演示中，启动、隐藏和转储可以显示相关属性，日志信息可以通过Chrome控制台查看）。

启动全屏模式

全屏API requestfullscreen方法仍然使用方法名称在一些老的浏览器形式的前缀，那么它可能需要检测和判断：
（带有前缀，意思是每个浏览器的内核不常见）。

复制代码代码如下所示：
找到支持方法，需要使用全屏元素调用
功能launchfullscreen（元）{
如果（元。requestfullscreen）{
element.requestfullscreen（）；
} else if（元。mozrequestfullscreen）{
element.mozrequestfullscreen（）；
} else if（元。webkitrequestfullscreen）{
element.webkitrequestfullscreen（）；
} else if（元。msrequestfullscreen）{
element.msrequestfullscreen（）；
}
}


启动全屏全屏浏览器
整个页面
launchfullscreen（文档。文档元素}）；
元素
launchfullscreen（document.getelementbyid（videoelement ））；


需要全屏的DOM元素用作参数。调用此方法使窗口可以进入全屏状态。有时需要用户同意。

如果用户同意进入全屏，工具栏和其他浏览器组件将被隐藏，以跨越整个屏幕的文档框架的宽度和高度。

退出全屏模式

exitfullscreen方法的使用允许浏览器退出全屏和返回原来的布局。该方法还支持一些旧浏览器上的前缀方法。

复制代码代码如下所示：
/ /退出全屏
功能exitfullscreen（）{
如果（文件。exitfullscreen）{
document.exitfullscreen（）；
} else if（文件。mozexitfullscreen）{
document.mozexitfullscreen（）；
} else if（文件。webkitexitfullscreen）{
document.webkitexitfullscreen（）；
}
}


调用/退出全屏方法！
ExitFullscreen（）；

注：exitfullscreen只能通过文件对象调用mdash；mdash；不使用普通DOM元素。

全屏的属性和事件

一个坏消息是，到目前为止，全屏事件和方法仍然是前缀，好消息是主流浏览器将很快支持它们。

1.document.fullscreenelement：目前在全屏状态的元素。
的2.document.fullscreenenabled：标签是目前可用的全屏。

当全屏幕方式进入/退出，这fullscreenchange事件触发：


复制代码代码如下所示：
无功fullscreenelement =
document.fullscreenenabled
| | document.mozfullscreenelement
| | document.webkitfullscreenelement；
无功fullscreenenabled =
document.fullscreenenabled
| | document.mozfullscreenenabled
| | document.webkitfullscreenenabled；

当初始化全屏方法时，可以检测要监听的事件。

全屏CSS

浏览器提供了一些有用的全屏CSS控制规则：

复制代码代码如下所示：
HTML
WebKit的全屏{
属性
}
-moz全屏{
属性
}


全屏{
属性
}


更深的元素
WebKit的全屏幕视频{
宽度：100%；
身高：100%；
}


样式化背景文件
：背景{
属性
}

在某些情况下，它需要一些特殊的处理，所以在处理多媒体，你可能需要上面的代码。

我想全屏API是超级简单，超级有用。这是第一次，我在一个完整的客户端的第一人称射击游戏叫MDN的bananabread演示看到这个API，这是使用全屏模式的一个优秀案例。

全屏幕API提供了进入和退出全屏模式的方法，并提供相应的事件来监视全屏状态的变化，因此所有方面都是一致的。

请记住这个很好的API mdash；mdash；在未来的某一时刻，它一定会使用！