HTML 5的<video>是一个相当不错的标签,但是它刚发布的时间,最大的问题是它不能像Flash那样实现真正的全屏。幸好,几个月后,大部分浏览器已经原生地支持全屏。
全屏API简史
- 第一个原生的全屏接口是在Safari 5.0(和iOS)中添加的 webkitEnterFullScreen() 函数。不过,它只能用于<video>标签。
- 在Safari 5.1中,苹果修改了这个API使它更接近于Mozilla的全屏API草案(比苹果的实现更早)。现在,所有DOM元素都可以调用 webkitRequestFullScreen() 方法。
- Firefox和Chome表示它们将会添加原生全屏API支持,而且这个特性已经在Chome 15+以及Firefox Nightly中实现。
在2011年10月15日,W3C发布了一份全屏API草案(由Opera团队的一名成员编写),它跟Mozilla的草案有两个主要的不同点:
- Mozilla/Webkit使用大写字母'S'(FullScreen),但W3C则不是(Fullscreen);
- 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条)