开发者社区> 微个日光日> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

How to Use HTML5 FUll Screen API(如何使用HTML5全屏接口)

简介: <p>原文链接:http://www.sitepoint.com/use-html5-full-screen-api/</p> <p>       如果你不太喜欢变化太快的东西,那么web开发可能不适合你。我曾在2012年末有写过Full-Screen API的介绍,并且当时就提到其实现细节可能会被修改,但是没有想到一年后我需要重写!本篇的所讲的内容也许不是最新的,但是非常感谢David
+关注继续查看

原文链接: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){....}

        之前的实现中“Screen”的“S”是大写的,并且FireFox仍需要大写。添加前缀的结果就是产生一大段跨浏览器代码:

//full-sreen available
if(
   document.fullscreenEnable||
   document.webkitFullscreenEnabled||
   document.mozFullScreenEnabled||
   document.msFullscreenEnabled
){
...
}

Opera 12是唯一一个不需要前缀的,除了Opera15+使用webkit.

element.requestFullscreen()(已改变

此方法可让单独的element全屏,例如:

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

document.fullscreenElement()(已改变

此属性返回的是当前为全屏显示的element,当不是全屏时则返回null:

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

document.exitFullsreen(已改变

此方法用于取消全屏模式:

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

document.fullscreenchange 事件

当进入或者退出全屏模式时将触发这个事件。此事件不提供任何的信息,但是你可以通过document.fullscreenElement是否为null来判断是否可以全屏。

document.addEventListener("fullscreenchange", function() { ... });

这个名字没有改变,但是我们还需要跨平台的前缀和IE的驼峰前缀:

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

这个名字没有改变,但是我们还需要跨平台的前缀和IE的驼峰前缀:
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 {
    ...
}
之前的名字为:full-sreen,并且Webkit和fireFox仍让使用它。跨浏览器代码如下:

:-webkit-full-screen {
}
 
:-moz-full-screen {
}
 
:-ms-fullscreen {
}
 
:fullscreen {
}

::backdrop(新增

你可以将颜色和图片背景应用到全屏模式不同分辨率显示下的元素中:

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

:-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;
}

你也可以让IE11像Webkit/blink那样,使全屏元素置于中央:
:-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!


转载请注明:来至微个日光日

前端技术交流群:139761568


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
CSS - 使用CSS3制作3D文本
CSS - 使用CSS3制作3D文本
38 0
《HTML 5与CSS 3权威指南(第3版·下册)》——19.4.5 E::selection伪类选择器
本节书摘来自华章出版社HTML 5与CSS 3权威指南(第2版·下册)——第19章 ,第19.4.5节 ,作者: 陆凌牛著.更多章节内容可以访问云栖社区“华章计算机”公众号查看。
939 0
CentOS7下安装mysql5.6修改字符集为utf8并开放端口允许远程访问
前言 mysql最初的免费战略已经深入人心,感觉自己一直都在用mysql。今天在centos7下装mysql。发现原来centos下默认没有mysql,因为开始收费了,取而代之的是另一个mysql的分支mariadb,这个是mysql创始人重新主导的分支。
1586 0
Fullscreen API 全屏显示网页
可参考文档:http://blog.csdn.net/tywali/article/details/8623938 脚本代码 var support = { fullscreen: "fullscreen" in document || ...
1142 0
API Plug-in for the S60 3rd Edition SDK for Symbian OS, for C++, MR
Package URL: Extensions plug-in package for S60 3rd Edition SDK for Symbian OS, for C++, MRCurrent version: 5.
847 0
175
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载