[译]原生全屏JavaScript API

Heero.Luo发表于13年前,已被查看10003次

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中实现。

在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) 》,略有删改。

评论 (2条)

发表评论

(必填)

(选填,不公开)

(选填,不公开)

(必填)