How to Use HTML5 FUll Screen API（如何使用HTML5全屏接口）

 

如果你不太喜欢变化太快的东西，那么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