如何使用HTML5全屏API

我们始终能够以全屏模式查看整个网页。 为此，您可以在Windows中按F11键，而在OS X中可以按Shift + Command + F 。 但是，有时候，作为Web开发人员，我们希望在网页上添加触发器以执行功能，而不是使用这些键。

除了提供几个新元素外， HTML5还引入了一组新API，其中包括我们将在本文中讨论的一个API ，称为Fullscreen API 。 使用此API，我们可以使用浏览器的本机功能将我们的网站或网页上的特定元素全屏显示（反之亦然）。

就实现而言，该API 特别适用于视频，图像，在线游戏以及基于HTML / CSS的幻灯片演示 。

因此，让我们看看它是如何工作的。

浏览器支持

在撰写本文时，此API仅适用于Google Chrome，Safari和Firefox。 与CSS3相似，该语法带有前缀，因为它仍处于实验阶段。

网页套件	火狐浏览器	描述
webkitRequestFullScreen	mozRequestFullScreen	全屏发送网页或指定元素的方法。
webkitCancelFullscreen	mozCancelFullscreen	退出全屏模式的方法。
mozFullScreenElement	webkitFullScreenElement	元素是否处于全屏模式的方法。

值得注意的是，全屏API将来可能会发生变化。

使用范例

学习新事物的最好方法之一就是以身作则。 在本文中，我们将运行一个简单的项目。 想法是我们将有一个图像和一个按钮，该按钮将使图像全屏显示或通过单击将其更改回普通视图。

让我们从HTML标记开始。 我们有一个<div>元素来包装图像，并为按钮提供一个<span>元素。

<div id="fullscreen" class="html5-fullscreen-api">
	<img src="img/arokanddedes.jpg">
	<span class="fs-button"></span>
</div>

然后，将图像放置在窗口的中心，并添加一些装饰样式以使其看起来更好。

.demo-wrapper {
	width: 38%;
	margin: 0 auto;
}
.html5-fullscreen-api {
	position: relative;
}
.html5-fullscreen-api img {
	max-width: 100%;
	border: 10px solid #fff;
	box-shadow: 0px 0px 50px #ccc;
}
.html5-fullscreen-api .fs-button {
	z-index: 100;
	display: inline-block;
	width: 32px;
	height: 32px;
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
}

我决定使用:after伪元素在<span>元素中显示图标，以便稍后我们可以使用content属性通过CSS轻松更改图标。

.html5-fullscreen-api .fs-button:after {
	display: inline-block;
	width: 100%;
	height: 100%;
	font-size: 32px;
	font-family: 'ModernPictogramsNormal';
	color: rgba(255,255,255,.5);
	cursor: pointer;
	content: "v";
}
.html5-fullscreen-api .fs-button:hover:after {
	color: rgb(255,255,255);
}

我们将使用jQuery使代码更加精简。

如前所述，我们将在单击后全屏发送图像。 我们将函数包装在jQuery .on方法下。

$('.fs-button').on('click', function(){ 

}

我们首先检查该元素是否已经处于全屏模式，如果此条件返回，我们将执行webkitCancelFullScreen将其发送到普通视图。 否则，我们将使用webkitRequestFullScreen方法将其变为全屏显示。

$('.fs-button').on('click', function(){
		var elem = document.getElementById('fullscreen');
		if(document.webkitFullscreenElement) {
			document.webkitCancelFullScreen();
		}
		else {
			elem.webkitRequestFullScreen();
		};
	});

单击全屏图标，我们的图像将全屏显示，如以下屏幕截图所示。

全屏CSS

Webkit（以及Firefox）还提供了一组新的伪类，允许我们在元素处于全屏模式时添加样式规则。 假设我们要更改背景，我们可以用这种方式编写样式规则。

#fullscreen:-webkit-full-screen {
	background-image: url('../img/ios-linen.jpg'); 
	width: 100%;
}

现在，您应该在全屏模式下看到iOS亚麻质地。

而已。 您可以转到演示页面以查看操作。 由于我们未使用Firefox语法指定功能，因此此演示仅在Webkit浏览器，Google Chrome和Safari中有效

• 观看演示
• 下载

其他参考

• 全屏API草案 — W3C
• 使用全屏模式 — MDN
• HTML5全屏API-网站点

翻译自: https://www.hongkiat.com/blog/html5-fullscreen-api/