HTML5 全屏 API

注:提 HTML5 只是说明他是一项新的东西,至于浏览器的 JavaScript API 应不应是 HTML5 的一个配套?我们不纠结。不如看这个接口能给我带来什么,思考可以如何给网页做个体验上的增强应用吧。

一、说在前面的

其实只是一个新的 JavaScript API,让 HTML 元素可以实现全屏显示。不过,这已经足够让我们兴奋。具体是怎样呢?其实这个从 iOS 和 Safari 5.0 就已经可以用在 <video> 上。看一下这个,在 iPhone 上访问 youku 上的一个视频:

html5 fullscreen

我们可以点击中间这个大大的放映按钮,这里 iOS 里的 safari 会把影片全屏显示,使用的就是这个接口。只不过是 Safari 自己实现的接口。依然不是 W3C 标准。如下图:

html5 fullscreen

 二、FullScreen JavaScript API 具体使用

1、JavaScript API

FullScreen Javascript API 目前仍是草案,实现这个 API,更确切来说是具有这项功能的浏览器有:Chrome 15 / Firefox Nightly / Safari 5.1。对于 JS API 的前端调用,我们可以先看看下面的代码:

// Webkit (works in Safari5.1 and Chrome 15)
element.webkitRequestFullScreen();
document.webkitCancelFullScreen();

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

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

只有两个方法,在需要调用全屏的元素调用 requestFullscreen() 方法,在需要退出时对 document 调用 exitFullscreen() 这个 API。问题不大,只是命名上的不同。

只是,厂商前缀,各浏览器的实现和 W3C 不一致,代码又得写得跟屎一样。我特意把不同用颜色标注出来。绿色的是相同的点,红色的是不同的点。在这一点上倒觉得 W3C 有点奇怪。好不容易 Webkit 和 Mozilla 是一致的,何必改掉命名。既然发,为什么不把 request 发成 enter 与 exit 对应?!。无论如何,至少可以实现,目前 IE 仍没有决定要不要实现这个草案,Johndyer 这样说:“I have an email from a IE team member saying they are discussing it, but have not made any decisions. ” 。呃~

在这里吐槽也没什么用,我们返回正题。浏览器支持 fullscreenchange 事件。让你可以为全屏做更多事。官方草案没有多提,只是略过,这一段来自 Johndyer 的代码,使用的是 Mozilla 的提案,具体使用还需要具体对待:

// Webkit-base: element.onwebkitfullscreenchange
// Firefox: element.onmozfullscreenchange

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

2. CSS 选择器::fullscreen / :fullscreen-ancestor

这两个选择器的作用是这样的:

  • :fullscreen – 当前全屏化的元素
  • :fullscreen-ancestor – 所有全屏化元素的祖先元素

对于 :fullscreen 还是比较好理解的,但对于 fullscreen-ancestor 要选出它的全家,而不仅仅是父节点,似乎不能理解其他使用。其实,看一下官方草案提供的 Demo 代码,就知道了:可以隐藏或者什么的。但为什么不把全屏的内容设置为最高级别置顶的元素呢?这一点 W3C 的选择似乎也比较另令想吐槽。看官方 CSS Demo 代码吧:

:fullscreen {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:2147483647;
  background:black;
  width:100%;
  height:100%;
}
/* If there is a fullscreen element that is not the root then
   we should hide the viewport scrollbar. */
:fullscreen-ancestor:root {
  overflow:hidden;
}
:fullscreen-ancestor {
  /* Ancestors of a fullscreen element should not induce stacking contexts
     that would prevent the fullscreen element from being on top. */
  z-index:auto;
  /* Ancestors of a fullscreen element should not be partially transparent,
     since that would apply to the fullscreen element and make the page visible
     behind it. It would also create a pseudo-stacking-context that would let content
     draw on top of the fullscreen element. */
  opacity:1;
  /* Ancestors of a fullscreen element should not apply SVG masking, clipping, or
     filtering, since that would affect the fullscreen element and create a pseudo-
     stacking context. */
  mask:none;
  clip:none;
  filter:none;
  transform:none;
}

 3. HTML 标签属性: allowFullScreen

像 flash 使用的 <object> 和 <embed> 可以设置是否允许全屏,现在这个特性同样可以应用于 <iframe> 标签。只要添加 allowFullScreen 属性即可:

<!-- content from another site that is allowed to use the fullscreen command -->
<iframe width="640" height="360" src="http://anothersite.com/video/123" allowfullscreen=""></iframe>

三、解决方案

一般来说,全屏主要应用还是在视频和游戏。当然,也可以实现像 Mac Lion 一样的全屏显示,就像 Preview.app,全屏的时候使用起来是非常爽的。游戏和视频可以使用 flash 来兼容旧的浏览器和不支持 fullScreen JavaScript API 的浏览器。像 Firefox Nightly( v10 会支持),Chrome 15, Safari 5.1 可以使用 Johndyer 的 jQuery 插件:https://gist.github.com/1354468

四、总结

目前遇到的问题可能是:

  1. IE 对这个功能的实现没有安排
  2. 全屏在 Mac 下是浏览器全屏还是内置实现的全屏?Chrome 实现的是 Lion 内置的全屏,而 Safari 本身实现的是浏览器自身的全屏。
  3. 安全问题,全屏下伪造一个系统登陆框?
  4. 是否所有元素都应该被全屏内容盖住?

似乎第 1 点和第 3 点是我们比较关注的,也需要去关注的。反而对于 API 的调用是比较简单的,不需要那么多思考。

引用 DEMO: Fullscreen JavaScript API

五、引用文档

1. 参考事件的处理:Let Your Content Do the Talking: Fullscreen API
2. 大部分代码引用这篇文章:Native Fullscreen JavaScript API (plus jQuery plugin)
3. 历史和讨论:Fullscreen HTML5 video
4. 标准与厂商对比:W3C Draft: Fullscreen

15 thoughts on “HTML5 全屏 API

  1. 最近在疯狂的学前端的知识,终于有点可以看懂了。能从浏览器的角度看问题真厉害,我一直想找有关浏览器的各个版本的特点,对各个功能的支持情况一直找不到特别详细的地方,都是零零碎碎的。这个知识先收下了,以后还会持续的关注。

  2. api命名的问题倒好说, 总会有各种框架出来做兼容性的.

    内置全屏和浏览器全屏? 这个问题没有理解.

    安全性是个问题, 不过用html伪造的登录界面估计很容易被看穿.

  3. W3C的命名更好:
    因为可以多个 element 都去 request 全屏,所以不应该用 enter。
    同时只有一个元素可以全屏,是种互斥的状态,是用退出好还是取消好呢,站在 document 全局的角度看我觉得还是退出更好,相交于取消对应于之前元素的请求。
    至于 Fullscreen 还是 Full Screen,这两个写法基本是等同的,哪个写法使用得多?

  4. @kever: Mac Lion 有 app 的全屏功能。会打开一个新的 space。如果是浏览器全屏,则只是在当前 space 显示。当然… 除了 Lion 系统,其他都没有这个问题。

  5. 请教您一个问题,这个全屏能不能直接触发呢?就是页面加载的时候就直接变成全屏,我不太会javascript,一直弄不起,不知道是我写错了还是根本不支持呢?

  6. 这个Native_FullScreen.js好像有一些问题,我用的是chrome,当我全屏后,页面上的input输入框很多字符无法输入,比如所有的数字以及e等等(我针对input[type="text"]写了onkeydown事件,这里输入我说的字符,无法触发)。请问关于这个问题有什么解决的办法,如果知道的话,请邮件通知一下,在线等,非常感谢!!我的邮箱:yeyu.yeyu@163.com

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>