HTML5中提供的<video>标签，在它刚发布的时候一个最大的问题就是它不能像Flash那样实现真正意义上的全屏，为此在接下来的几个月各大浏览器开始支持原生全屏。

Full Screen API 各大浏览器支持

来，先看一个演示，^_^

浏览器全屏API简史

  1. 第一个实现浏览器原生全屏API的是在Safari 5.0（和iOS）中添加的webkitEnterFullScreen()函数，不过它只能在Safar的<video>标签的controls中(参见： Apple’s HTML5VideoElement)。
  2. 在Safari 5.1中，苹果更新了这个API使它更接近于Mozilla的全屏API草案(实际上这要比苹果实现的更早)，现在，所有的DOM元素都可以调用webkitRequestFullScreen()函数使HTML页面进入到全屏模式。
  3. Firefox和Chome宣布它们将会添加原生的全屏API支持，而且这个特性已经在Chome 15+以及Firefox Nightly(Firefox10+)中实现，Mozilla团队已经发布了一些演示。
  4. 在2011年10月15日，W3C发布了一份全屏API草案（由Opera团队的一名成员编写），它跟Mozilla的草案有两个主要的不同点：
    1. Mozilla/Webkit使用大写字母’S’（FullScreen），但W3C则不是（Fullscreen）
    2. Mozilla/Webkit使用cancelFullScreen，W3C使用exitFullscreen
  5. 更新 (11/15/2011)：来自 IEBlog的Ted Johnson说IE10将不会支持全屏API (12/05/2011: 我对Ted的第一封email理解错了)IE10的开发团队还没有决定是否要实现全屏API。不过，他指出：Win8的 Metro风格的Internet Explorer始终是全屏状态，正如以前那样，按F11键即可进入全屏模式。

浏览器全屏API

Element.requestFullscreen()方法用于发出异步请求使元素进入全屏模式。

语法

var Promise = Element.requestFullscreen(options);

参数 options 可选

目前，唯一的选项是navigationUI，这控制了是否在元素处于全屏模式时显示导航条UI。默认值是”auto”，表明这将由浏览器来决定是否显示导航条。其它值还有”hide”，”show”。

返回值

在完成切换全屏模式后，返回一个已经用值 undefined resolved的Promise

异常

requestFullscreen() 通过拒绝返回的 Promise来生成错误条件，而不是抛出一个传统的异常。

在以下几种情况下，会抛出TypeError：

  • 文档中包含的元素未完全激活，也就是说不是当前活动的元素。
  • 元素不在文档之内。
  • 因为功能策略限制配置或其他访问控制，元素不被允许使用"fullscreen"功能。
  • 元素和它的文档是同一个节点。 

全屏代码具体实现

进入全屏

function requestFullscreen(ele) {
  if (ele.requestFullscreen) {
    // mozilla proposal
    return ele.requestFullscreen();
  } else if(element.requestFullscreen) {
    // W3C Proposal
    return ele.requestFullscreen();
  } else if (ele.mozRequestFullScreen) {
    // Firefox (works in nightly)
    return ele.mozRequestFullScreen();
  } else if (ele.webkitRequestFullscreen) {
    // Webkit (works in Safari and Chrome Canary)
    return ele.webkitRequestFullscreen();
  } else if (ele.msRequestFullscreen) {
    // IE
    return ele.msRequestFullscreen();
  }
}

退出全屏

function exitFullscreen() {
  if(document.cancelFullScreen) {
    // mozilla proposal
    document.cancelFullScreen();
  }else if(document.exitFullScreen) {
    // W3C Proposal
    document.exitFullScreen();
  } else if(document.mozCancelFullScreen) {
    // Firefox (works in nightly)
    document.mozCancelFullScreen();
  } else if(document.webkitExitFullscreen) {
    // Webkit (works in Safari and Chrome Canary) or document.webkitCancelFullScreen(); 
    document.webkitExitFullscreen();
  } else if(document.msExitFullscreen) {
    // IE
    document.msExitFullscreen();
  }
}

获取当前全屏的节点 

function getFullscreenElement() {
  return (        
    document.fullscreenElement ||
    document.mozFullScreenElement ||
    document.msFullScreenElement ||
    document.webkitFullscreenElement||null
  );
}

判断当前是否全屏 

function isFullScreen() {
  return  !! (
      document.fullscreen || 
      document.mozFullScreen ||                         
      document.webkitIsFullScreen ||       
      document.webkitFullScreen || 
      document.msFullScreen 
   );
}

判断是否支持全屏

function isFullscreenEnabled() {
  return  (
    document.fullscreenEnabled ||
    document.mozFullScreenEnabled ||
    document.webkitFullscreenEnabled ||
    document.msFullscreenEnabled
  );
}

浏览器全屏事件 

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

浏览器全屏样式

Mozilla和W3C都提供了新的伪CSS类来装饰元素的全屏模式。 

/* normal state */
.my-container {
    width: 640px;
    height: 360px;
}

/* Mozilla proposal (dash) */
.my-container:full-screen {
    width:100%;
    height:100%;
}

/* W3C proposal (no dash) */
.my-container:fullscreen {
    width:100%;
    height:100%;
}

/* currently working vendor prefixes */
.my-container:-webkit-full-screen, .my-container:-moz-full-screen {
    width:100%;
    height:100%;
}

嵌套的浏览器全屏

当你使用Flash的<object>、<embed>从其他站点嵌入内容（比如一个YouTuBe视频）是，你可以指定是否允许它们全屏。这个特性也通过allowFullScreen属性添加到<iframe>标签。 

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

参考