[html5]HTML5全屏与退出全屏的API(2)

请注意: exitFullscreen 只能通过 document 对象调用 —— 而不是使用普通的 DOM element.

Fullscreen 属性与事件
一个坏消息,到目前为止,全屏事件和方法依然是带前缀的,好消息就是很快主流浏览器就会都支持。

• document.fullscreenElement:  当前处于全屏状态的元素 element.
• document.fullscreenEnabled:  标记 fullscreen 当前是否可用.

当进入/退出 全屏模式时,会触发 fullscreenchange 事件:

var fullscreenElement =    
    document.fullscreenEnabled   
    || document.mozFullscreenElement   
    || document.webkitFullscreenElement;   
var fullscreenEnabled =    
    document.fullscreenEnabled   
    || document.mozFullscreenEnabled   
    || document.webkitFullscreenEnabled;   

在初始化全屏方法时,可以探测需要监听哪一个事件.

Fullscreen CSS
浏览器提供了一些有用的 fullscreen CSS 控制规则:

/* html */   
:-webkit-full-screen {   
  /* properties */   
}   
:-moz-fullscreen {   
  /* properties */   
}   
   
   
:fullscreen {   
  /* properties */   
}   
   
   
/* deeper elements */   
:-webkit-full-screen video {   
  width: 100%;   
  height: 100%;   
}   
   
   
/* styling the backdrop */   
::backdrop {   
  /* properties */   
}   

在某些情况下,WebKit需要一些特殊处理,所以在处理多媒体时,你可能需要上面的代码。

我认为 Fullscreen API 超级简单,超级有用. 我首次见到这个 API 是在一个名为 MDN's BananaBread demo 的全客户端第一人称射击游戏, 这真是一个使用全屏模式的绝佳案例。
全屏API提供了进入和退出全屏模式的方式,并提供相应的事件来监测全屏状态的改变,所以各方面都连贯起来了.

请记住这个很好的API吧 —— 在未来的某个时刻,它肯定会派上用场!

来源：http://blog.csdn.net/renfufei/article/details/17657093