二分之一

众说周知，html5的<video>标签是一个激动人心的技术革新，但同时因不能全屏而被诟病。

这一现状已经被改变，并将被越来越多的浏览器所支持。Firefox 10 的发布就开始支持全屏API，除FireFox 10外，Chrome 15与Safari 5.1或更高版本的浏览器也已经支持原生全屏API。

值得一提的差异，全屏退出，FireFox和Safari都是使用“ESC”键退出，而Chrome 15却采用“F11”退出全屏，这些微小的差别，却会给用户带来困扰，愿Chrome能改回“ESC”退出。

在2011年10月15日，W3C发布了一份全屏API草案（由Opera团队的一名成员编写），它跟Mozilla的草案有两个主要的不同点：

• 1、Mozilla/Webkit使用大写字母’S'（FullScreen），但W3C则不是（Fullscreen）；
• 2、Mozilla/Webkit使用cancelFullScreen，W3C使用exitFullscreen。

一、自定义API对象，以便兼容使用

var fullScreenApi = {
    supportsFullScreen: false, //是否支持全屏
    isFullScreen: function() { return false; }, //是否全屏状态
    requestFullScreen: function() {}, //触发全屏
    cancelFullScreen: function() {}, //取消全屏
    fullScreenEventName: '', //全屏事件名
    prefix: '' //浏览器前缀
}
var browserPrefixes = 'webkit moz o ms khtml'.split(' '); //浏览器前缀列表

二、检测浏览器是否支持全屏API

if (typeof document.cancelFullScreen != 'undefined') {
    fullScreenApi.supportsFullScreen = true;
} else {
    //检测支持全屏的浏览器前缀，该API各浏览器厂商在该方法加了自己的前缀
    for (var i = 0, il = browserPrefixes.length; i < il; i++ ) {
        fullScreenApi.prefix = browserPrefixes[i];
        if (typeof document[fullScreenApi.prefix + 'CancelFullScreen' ] != 'undefined' ) {
            fullScreenApi.supportsFullScreen = true;
            break;
        }
    }
}

三、进入全屏，退出全屏，以及全屏事件名的兼容检测

if (fullScreenApi.supportsFullScreen) {
    fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange';

    fullScreenApi.isFullScreen = function() {
        switch (this.prefix) {
            case '':
                return document.fullScreen;
            case 'webkit':
                return document.webkitIsFullScreen;
            default:
                return document[this.prefix + 'FullScreen'];
        }
    }
    fullScreenApi.requestFullScreen = function(el) {
        return (this.prefix === '') ? el.requestFullScreen() : el[this.prefix + 'RequestFullScreen']();
    }
    fullScreenApi.cancelFullScreen = function(el) {
        return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + 'CancelFullScreen']();
    }
}

四、全屏样式

/* 普通状态 */
.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%; }

相比于PC端的浏览器全屏，我更期待移动终端的浏览器全屏，这对于WEB APP的发展更有帮助。

在线DEMO：http://johndyer.name/lab/fullscreenapi/

最后修改时间：2014年9月8日星期一晚上9点03