HTML 5的<video>是一个相当不错的标签，但是它刚发布的时间，最大的问题是它不能像Flash那样实现真正的全屏。幸好，几个月后，大部分浏览器已经原生地支持全屏。

全屏API简史

1. 第一个原生的全屏接口是在Safari 5.0（和iOS）中添加的 webkitEnterFullScreen() 函数。不过，它只能用于<video>标签。
2. 在Safari 5.1中，苹果修改了这个API使它更接近于Mozilla的全屏API草案（比苹果的实现更早）。现在，所有DOM元素都可以调用 webkitRequestFullScreen() 方法。
3. Firefox和Chome表示它们将会添加原生全屏API支持，而且这个特性已经在Chome 15+以及Firefox Nightly中实现。
4. 在2011年10月15日，W3C发布了一份全屏API草案（由Opera团队的一名成员编写），它跟Mozilla的草案有两个主要的不同点：
   1. Mozilla/Webkit使用大写字母'S'（FullScreen），但W3C则不是（Fullscreen）；
   2. Mozilla/Webkit使用cancelFullScreen，W3C使用exitFullscreen。

理解全屏API

检测全屏支持

首先，你需要使用typeof检测浏览器是否支持全屏API。同时，也要检测一个布尔属性fullScreenEnabled，它会告诉你用户是否启用了全屏特性。

// Mozilla草案的API：实际上，你还需要检测其他厂商的前缀
if (typeof document.cancelFullScreen != 'undefined' && document.fullScreenEnabled === true) {
    /* do fullscreen stuff */
}

进入和退出全屏

要进入全屏模式，可以调用该元素的requestFullScreen（或者W3C的 requestFullscreen）方法。。要退出全屏，则调用document对象的cancelFullScreen（或者W3C的exitFullscreen）方法。

// mozilla草案
element.requestFullScreen();
document.cancelFullScreen();

// Webkit (works in Safari and Chrome)
element.webkitRequestFullScreen();
document.webkitCancelFullScreen();

// Firefox (works in nightly)
element.mozRequestFullScreen();
document.mozCancelFullScreen();

// W3C
element.requestFullscreen();
document.exitFullscreen();


Mozilla还提供了一个备用的requestFullScreenWithKeys()方法让用户可以通过键盘进入全屏模式。在Flash中，Adobe一直在全屏状态时禁止键盘支持，以防止恶意网站试图窃取密码，但浏览器制造商似乎正考虑使之成为一个可选设置。

全屏事件和当前状态

要检测全屏事件的发生，可以监听元素的fullscreeneventchange事件，而document的布尔属性fullScreen会指明当前是否全屏状态。

element.addEventListener('fullscreeneventchange', function(e) {
    if (document.fullScreen) {
        /* make it look good for fullscreen */
    } else {
        /* return to the normal state in page */
    }
}, true);

Mozilla也提到在将来增加一个fullscreendenied事件。另外，Webkit在全屏布尔属性的名字上加了'Is'：

// Mozilla草案
document.fullScreen;

// Firefox (Nightly)
document.mozFullScreen;

// Webkit (Chrome, Safari)
document.webkitIsFullScreen; // 注意多了'Is'

// W3C草案
document.fullscreen;


全屏样式

Mozilla和W3C都提供了新的伪CSS类来装饰元素的全屏模式。

/* 普通状态 */
.my-container { width: 640px; height: 360px; }

/* Mozilla草案 (有中划线) */
.my-container:full-screen { width:100%; height:100%;}

/* W3C草案 (无中划线) */
.my-container:fullscreen { width:100%; height:100%;}

/* 当前可用的供应商前缀 */
.my-container:-webkit-full-screen,
.my-container:-moz-full-screen { width:100%; height:100%; }


嵌入元素的全屏

当你使用Flash的<object>、<embed>从其他站点嵌入内容（比如一个YouTuBe视频）是，你可以指定是否允许它们全屏。这个特性也通过allowFullScreen属性添加到<iframe>标签。

<!-- 允许使用全屏命令的外部内容 -->
<iframe src="http://anothersite.com/video/123" width="640" height="360" allowFullScreen="allowFullScreen"></iframe>

本文翻译自《Native Fullscreen JavaScript API (plus jQuery plugin) 》，略有删改。

建议继续学习：

1. AlloyTouch实现下拉刷新    (阅读：1281)
2. 各种浏览器全屏模式的方法，video、img全屏等    (阅读：747)