How to Use HTML5 FUll Screen API(如何使用HTML5全屏接口) 【精】
原文链接:http://www.sitepoint.com/use-html5-full-screen-api/
如果你不太喜欢变化太快的东西,那么web开发可能不适合你。我曾在2012年末有写过Full-Screen API的介绍,并且当时就提到其实现细节可能会被修改,但是没有想到一年后我需要重写!本篇的所讲的内容也许不是最新的,但是非常感谢David Storey帮我重点归纳出近期技术方面的变化....
什么是Full-Screen API?
此API可以使单个元素全屏显示。与按下F11键强制浏览器全屏不同,此API的目标是运行在一个容器中的图片,视频和游戏。当进入全屏模式时,将会出现一条信息通知用户可在任何时候按ESC键而返回页面。
现在主流的桌面浏览器(包括IE11)都支持此Full-Screen API。移动设备上有少部分支持,但是这些浏览器基本上都是全屏显示的。很不幸在不同浏览器上的不同细微表现有待我们去解决...
The JavaScript API
假设我们有一个ID为myimage的image,并且我们将让它全屏显示。那么需要用到的属性和方法有:
document.fullscreenEnabled(已改变)
如果document允许全屏模式,则此属性返回true。它可以用来检测浏览器是否支持全屏模式:
- if(document.fullscreenEnabled){....}

if(document.fullscreenEnabled){....}
之前的实现中“Screen”的“S”是大写的,并且FireFox仍需要大写。添加前缀的结果就是产生一大段跨浏览器代码:
- //full-sreen available
- if(
- document.fullscreenEnable||
- document.webkitFullscreenEnabled||
- document.mozFullScreenEnabled||
- document.msFullscreenEnabled
- ){
- ...
- }

//full-sreen available
if(
document.fullscreenEnable||
document.webkitFullscreenEnabled||
document.mozFullScreenEnabled||
document.msFullscreenEnabled
){
...
}
Opera 12是唯一一个不需要前缀的,除了Opera15+使用webkit.
element.requestFullscreen()(已改变)
此方法可让单独的element全屏,例如:
- document.getElementById(“myimage").requestFullscreen();

document.getElementById(“myimage").requestFullscreen();
同样的,"screen"中的"s"变成称过了小写的了。下面是跨浏览器代码:
- var i = document.getElementById("myimage");
- // go full-screen
- if (i.requestFullscreen) {
- i.requestFullscreen();
- } else if (i.webkitRequestFullscreen) {
- i.webkitRequestFullscreen();
- } else if (i.mozRequestFullScreen) {
- i.mozRequestFullScreen();
- } else if (i.msRequestFullscreen) {
- i.msRequestFullscreen();
- }

var i = document.getElementById("myimage"); // go full-screen
if (i.requestFullscreen) {
i.requestFullscreen();
} else if (i.webkitRequestFullscreen) {
i.webkitRequestFullscreen();
} else if (i.mozRequestFullScreen) {
i.mozRequestFullScreen();
} else if (i.msRequestFullscreen) {
i.msRequestFullscreen();
}
document.fullscreenElement()(已改变)
此属性返回的是当前为全屏显示的element,当不是全屏时则返回null:
- if (document.fullscreenElement) { ... }

if (document.fullscreenElement) { ... }
"screen"现在是小写的了。跨浏览器代码如下:
- // are we full-screen?
- if (
- document.fullscreenElement ||
- document.webkitFullscreenElement ||
- document.mozFullScreenElement ||
- document.msFullscreenElement
- ) {
- ...
- }

// are we full-screen?
if (
document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement
) {
...
}
document.exitFullsreen(已改变)
此方法用于取消全屏模式:
- document.exitFullscreen;

document.exitFullscreen;
同样的,”screen"又变成小写的了,之前为cancelFullScreen,fireFox仍使用它。跨浏览器代码如下:
- // exit full-screen
- if (document.exitFullscreen) {
- document.exitFullscreen();
- } else if (document.webkitExitFullscreen) {
- document.webkitExitFullscreen();
- } else if (document.mozCancelFullScreen) {
- document.mozCancelFullScreen();
- } else if (document.msExitFullscreen) {
- document.msExitFullscreen();
- }

// exit full-screen
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
document.fullscreenchange 事件
当进入或者退出全屏模式时将触发这个事件。此事件不提供任何的信息,但是你可以通过document.fullscreenElement是否为null来判断是否可以全屏。
- document.addEventListener("fullscreenchange", function() { ... });

document.addEventListener("fullscreenchange", function() { ... });
这个名字没有改变,但是我们还需要跨平台的前缀和IE的驼峰前缀:
- document.addEventListener("fullscreenchange", FShandler);
- document.addEventListener("webkitfullscreenchange", FShandler);
- document.addEventListener("mozfullscreenchange", FShandler);
- document.addEventListener("MSFullscreenChange", FShandler);

document.addEventListener("fullscreenchange", FShandler);
document.addEventListener("webkitfullscreenchange", FShandler);
document.addEventListener("mozfullscreenchange", FShandler);
document.addEventListener("MSFullscreenChange", FShandler);
document.fullscreenerror 事件
全屏操作可能会失败。例如iframes没有allowfullscreen属性或者是以窗口形式显示的内容也许会引起冲突。因此一个fullscreenerror也许会被触发:
- document.addEventListener("fullscreenerror", function() { ... });

document.addEventListener("fullscreenerror", function() { ... });
这个名字没有改变,但是我们还需要跨平台的前缀和IE的驼峰前缀:
- document.addEventListener("fullscreenerror", FSerrorhandler);
- document.addEventListener("webkitfullscreenerror", FSerrorhandler);
- document.addEventListener("mozfullscreenerror", FSerrorhandler);
- document.addEventListener("MSFullscreenError", FSerrorhandler);

document.addEventListener("fullscreenerror", FSerrorhandler);
document.addEventListener("webkitfullscreenerror", FSerrorhandler);
document.addEventListener("mozfullscreenerror", FSerrorhandler);
document.addEventListener("MSFullscreenError", FSerrorhandler);
FUll-Screen CSS
我们也可以在CSS样式中影响全屏...
:fullscreen (pseudo class)伪类(已改变)
你可以将此样式应用到一个一个element或者它的孩子,当它们在全屏模式下显示时才有效:
- :fullscreen {
- ...
- }

:fullscreen {
...
}
之前的名字为:full-sreen,并且Webkit和fireFox仍让使用它。跨浏览器代码如下:
- :-webkit-full-screen {
- }
- :-moz-full-screen {
- }
- :-ms-fullscreen {
- }
- :fullscreen {
- }

:-webkit-full-screen {
} :-moz-full-screen {
} :-ms-fullscreen {
} :fullscreen {
}
::backdrop(新增)
你可以将颜色和图片背景应用到全屏模式不同分辨率显示下的元素中:
- :fullscreen::backdrop {
- #006; /* dark blue */
- }

:fullscreen::backdrop {
background-color: #006; /* dark blue */
}
backdrop是在fullsreen元素后面的伪元素,但是是其他页面上的内容。IE11提供了支持,但那时firefox和Opera12没有.CHrome,Safari和Opera15+包含了backdrop元素,但是不允许给它样式。目前,你可以只面向IE11,如:
- :-ms-fullscreen::-ms-backdrop {
- #006; /* dark blue */
- }

:-ms-fullscreen::-ms-backdrop {
background-color: #006; /* dark blue */
}
样式差异
在IE11,firefox和Opera12中full-sreen元素被设置成100%宽和高。因此Imagey将会被拉伸,而忽视它的高宽比。在IE11中设置高和宽使全屏元素置于左上角,和一个黑色的背景(::backdrop中配置的)。Opera12和IE11相似,但是背景是透明的。Firefox忽视它的尺寸。在Chrome,Safari和Opera15+中全屏元素置于一个黑色背景的中央。
如果你想保持一致性,可以使Webkit/Blink 浏览器伸缩至Firefox/IE11那样:
- :-webkit-full-screen {
- position: fixed;
- width: 100%;
- top: 0;
- background: none;
- }

:-webkit-full-screen {
position: fixed;
width: 100%;
top: 0;
background: none;
}
你也可以让IE11像Webkit/blink那样,使全屏元素置于中央:
- :-ms-fullscreen {
- width: auto;
- height: auto;
- margin: auto;
- }

:-ms-fullscreen {
width: auto;
height: auto;
margin: auto;
}
此方法不适用于Firefox,因为它忽视width和height,之前提到过。解决的办法就是,你需要让此元素的父元素全屏并应用于适当的尺寸,如:shown in this demonstration.
Ready for Deployment?
HTML5 Full-Sreen API相对比较简单,但是浏览器的差异性导致很丑的代码,并且不能保证它们不会再改变。这种情况会得到改善,所以最好是把大部分时间和精力投入到其他功能和特性上,直到此API变成更稳定些。
这就是说,full-sreen可以用于HTML5游戏和视频网站。如果你不想自己维护代码,你可以使用screenfull.js 这样的类库,它可以平滑过渡这些差异,Beast of Luck!
转载请注明:来至微个日光日
How to Use HTML5 FUll Screen API(如何使用HTML5全屏接口) 【精】的更多相关文章
- How to Use HTML5 FUll Screen API(怎样使用HTML5全屏接口)
原文链接:http://www.sitepoint.com/use-html5-full-screen-api/ 假设你不太喜欢变化太快的东西,那么web开发可能不适合你. 我曾在2012年末有写过F ...
- 【html5】 解决 video标签 不自动全屏
<video controls="controls" poster='' src='' preload="auto" x5-playsinline=&qu ...
- HTML5 <Audio>标签API整理(三)
一.浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素. 注意: Internet Ex ...
- HTML5实现全屏
现在主流的浏览器都支持全屏,但是各家实现不一.下面是主流浏览器实现方法: // W3C 提议 element.requestFullscreen(); element.exitFullscreen() ...
- HTML5全屏浏览器兼容方案
最近一个项目有页面全屏的的需求,搜索了下有HTML5的全屏API可用,不过各浏览器的支持不一样. 标准 webkit Firefox IE Element.requestFullscreen() ...
- 从零开始学 Web 之 HTML5(三)网络监听,全屏,文件读取,地理定位接口,应用程序缓存
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- h5的api dom全屏展示
下面是完整的例子,暂不做分析 <!DOCTYPE html> <html> <head> <title> FullScreen API 演示</t ...
- 【小月博客】用HTML5的File API做上传图片预览功能
前段时间做了一个项目,涉及到上传本地图片以及预览的功能,正好之前了解过 html5(点击查看更多关于web前端的有关资源) 可以上传本地图片,然后再网上看了一些demo结合自己的需求,终于搞定了.(P ...
- HTML5 <Audio/>标签Api整理(二)
1.实例2: 相对较完整 Html代码: <style> #volumeSlider .slider-selection { background:#bababa; } </styl ...
随机推荐
- 微信小程序-基于canvas画画涂鸦
代码地址如下:http://www.demodashi.com/demo/14461.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- HDUOJ---1754 Minimum Inversion Number (单点更新之求逆序数)
Minimum Inversion Number Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java ...
- Android应用的自动升级、更新模块的实现
我们看到很多Android应用都具有自动更新功能,用户一键就可以完成软件的升级更新.得益于Android系统的软件包管理和安装机制,这一功能实现起来相当简单,下面我们就来实践一下.首先给出界面效果: ...
- PLSQL_统计信息系列01_统计信息的概念和重要性
2014-12-18 Created By BaoXinjian
- debian系在线安装软件apt-get命令族
一.背景 apt-get install/remove在线安装/卸载文件真是方便极了. 但是有时候安装/卸载文件不清楚文件在服务器上的实际命名,例如想安装sndfile.应该执行下面哪个命令呢? ap ...
- go系列之数组
数组 数组是同一类型元素的集合.例如,整数集合 5,8,9,79,76 形成一个数组.Go 语言中不允许混合不同类型的元素,例如包含字符串和整数的数组.(译者注:当然,如果是 interface{} ...
- 【C语言】给一组组数,仅仅有两个数仅仅出现了一次,其它全部数都是成对出现的,找出这两个数。
//给⼀组组数,仅仅有两个数仅仅出现了一次.其它全部数都是成对出现的,找出这两个数. #include <stdio.h> int find_one_pos(int num) //找一个为 ...
- QListWidget加入小控件
在写一个简单的文件浏览器时,遇到一个问题.想实现新建目录时能像一般的文件管理器那样,目录图标以下有一个编辑框提示用户给目录命名(例如以下图),可是不知道怎么给单元项QListWidgetItem加入Q ...
- android的一些控件
原来朋友给过的一个 显示时间的 样例,还能够改动时间,可是要机子有root权限才干改动. 在这个时间表盘的样例基础上 改动改动 图片.背景图什么的 就能够达到自己想要的效果了.. 下载地址 ...
- [ci] jenkins的Timestamper插件-让日志显示时间
jenkins的Timestamper插件-让jenkins console带时间戳 安装插件 配置pipline,使用timestamp - 官网有说怎么用: 即用timestamps{} 包裹所有 ...