(轉)HTML5 全屏 API

注：提 HTML5 只是說明他是一項新的東西，至於瀏覽器的 JavaScript API 應不應是 HTML5 的一個配套？我們不糾結。不如看這個接口能給我帶來什么，思考可以如何給網頁做個體驗上的增強應用吧。

一、說在前面的

其實只是一個新的 JavaScript API，讓 HTML 元素可以實現全屏顯示。不過，這已經足夠讓我們興奮。具體是怎樣呢？其實這個從 iOS 和 Safari 5.0 就已經可以用在 <video> 上。看一下這個，在 iPhone 上訪問 youku 上的一個視頻：

我們可以點擊中間這個大大的放映按鈕，這里 iOS 里的 safari 會把影片全屏顯示，使用的就是這個接口。只不過是 Safari 自己實現的接口。依然不是 W3C 標准。如下圖：

 二、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 10
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