HTML5 Fullscreen API html5全屏编程API

原文地址：http://www.javaarch.net/jiagoushi/692.htm

 

HTML5 Fullscreen API html5全屏编程API

 

页面要实现全屏预览，需要隐藏浏览器地址栏工具类等组件，那么需要考虑下用户体验。

 

w3c规范中的fullscreen标准可以查看：http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html

 

当前在firefox，chrome，safari中已经支持这个API。那么我们简单看看这个代码实现：

 

1.请求全屏 Requesting fullscreen

 

  为了兼容这几个浏览器需要这么写：

  

	var docElm = document.documentElement;
	if (docElm.requestFullscreen) {
		docElm.requestFullscreen();
	}
	else if (docElm.mozRequestFullScreen) {
		docElm.mozRequestFullScreen();
	}
	else if (docElm.webkitRequestFullScreen) {
		docElm.webkitRequestFullScreen();
	}

 

 

这里各个浏览器的API方法的大小写不一样，w3c规范中建议方法都是小写。这里是把整个docuement请求全屏，我们也可以只针对某个元素需要全屏展示，比如video。

 

2.取消全屏 Cancelling fullscreen

 

if (document.exitFullscreen) {
		document.exitFullscreen();
	}
	else if (document.mozCancelFullScreen) {
		document.mozCancelFullScreen();
	}
	else if (document.webkitCancelFullScreen) {
		document.webkitCancelFullScreen();
	}

 

w3c中使用exitFullscreen这个API，但是浏览器却都有自己的实现。

 

3.检查全屏状态变化 Detecting fullscreen state change

 

	document.addEventListener("fullscreenchange", function () {
		fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";
	}, false);

	document.addEventListener("mozfullscreenchange", function () {
		fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";
	}, false);

	document.addEventListener("webkitfullscreenchange", function () {
		fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";
	}, false);

 

 

4.css的全屏样式 Styling fullscreen

在css中，我们有几个伪类来给全屏设置样式，一般是 full-screen 这个伪类，然后会自动再全屏的时候生效

 

	html:-moz-full-screen {
		background: red;
	}

	html:-webkit-full-screen {
		background: red;
	}

	html:fullscreen {
		background: red;
	}

 

 

5.全屏状态下的键盘输入 Full screen with key input

 为了安全原因，很多情况下全屏输入都是被阻塞禁止的，但是chrome允许通过下面的API来允许键盘输入

 

docElm.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);

 

 

这个只在chrome支持，其他浏览器不支持。firefox计划使用requestFullscreenWithKeys 方法来支持鼠标输入，但是会触发用户通知已保证安全。

 

firefox10以上，chrome 15和safari5.1以上都支持了。

 

这是一个demo的地址：http://robnyman.github.io/fullscreen/，还有一个github示例代码：https://github.com/robnyman/robnyman.github.com/tree/master/fullscreen