如何使用HTML5全屏API

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

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

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

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

推荐读物： 更多HTML5 / CSS3教程

浏览器支持

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

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

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

使用范例

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

HTML

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

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

CSS

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

.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);
}

JavaScript

我们将使用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中有效

其他参考

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

如何使用HTML5全屏API

浏览器支持

使用范例

全屏CSS

其他参考

相关推荐