关于使用全屏API实现真正全屏

[cnbeining]

现在的全屏是网页全屏。

关于真正全屏，我做了下尝试：

function launchFullscreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

function exitFullscreen() {
  if(document.exitFullscreen) {
    document.exitFullscreen();
  } else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if(document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
}

然后，player.js 466:

            ABPInst.btnFull.addEventListener("click", function(){
                ABPInst.state.fullscreen = Boolean(document.webkitIsFullScreen||document.mozFullScreen);
                if(!ABPInst.state.fullscreen){
                    launchFullscreen(document.documentElement); 
                    //launchFullscreen(document.getElementsByClassName("ABP-Unit"));
                    //addClass(playerUnit, "ABP-FullScreen");
                }else{
                    //removeClass(playerUnit, "ABP-FullScreen");
                    exitFullscreen();
                }

这样就可以实现整个全屏。

但是不知道为什么，我无论如何不可能实现单个元素全屏，没有任何例程可以在我的任何浏览器上运行。。。。一切办法都直接报错。估计还是我打开方法不对。。。。

[jabbany]

试试CCL的Demo里面的Fullscreen，我这里chrome beta就可以。有关按钮挂载可以考虑采取这样的代码：

  ABPInst.btnFull.addEventListener("click", function(){
        ABPInst.state.fullscreen = document.webkitIsFullScreen || document.mozFullScreen;
        if(!ABPInst.state.fullscreen){
            launchFullscreen(playerUnit);
            addClass(playerUnit, "ABP-FullScreen");
         }else{
            removeClass(playerUnit, "ABP-FullScreen");
            exitFullscreen();
         }
   }

playerUnit 就是 ABP-Unit，如果用getElementsByClass首先是获取了一个列表的元素，其次如果直接遍历，那样会把页面上所有播放器实例都全屏。。。。

ABPlayerHTML5最初设计的全屏就故意是页面全屏，因为真的全屏还要考虑隐藏控制条，建议在创建的时候给参数 mobile:true 如果想让全屏变成真的全屏的话。。。

（上面代码没测试，凭感觉大概是这样）