如何实现HTML5全屏模式Full Screen API

11-17 次

标签全屏模式

查看演示

HTML5引入了一些新的元素和一些神奇的API。本教程要学习的是其中的全屏模式FullScreen API。

为什么称它为全屏模式Full-Screen API？

在这个API出现之前，我们只能简单的使用F11键使浏览器进入全屏模式。我们不能够选择我们想要的页面元素进入全屏模式，通过Full-Screen API我们能够打破这种限制。

使用Full-Screen API能使一个页面中指定的元素进入全屏模式。它对视频、图片、游戏或基于HTML/CSS的幻灯片、轮询图特别有用。当用户静茹全屏模式，就会有一条提示信息告知他们使用ESC键可以随时退出全屏模式。

全屏模式的属性和事件：

Full-Screen API公开了文档对象的两个属性：

fullScreenEnabled
fullScreenElement

如果当前全屏模式可用，这些指定的对象将被转换为全屏模式。

document.fullscreenEnabled

如果当前文档允许全屏模式，这个属性值返回true。它也被用来检测浏览器是否支持全屏模式。

if (document.fullscreenEnabled) { 
    // further code goes here
 }

注意：在以前的版本中，在˜Screen中有一个波浪线˜S，现在在Firefox它任然起作用。下面是夸浏览器的写法：

if (document.mozFullScreenEnabled || document.fullscreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled ) {
    // further code goes here
}

document.fullscreenElement

这个属性将返回当前进入全屏模式的元素，或返回null(未进入全屏模式)。

if (document.fullscreenElement) { 
    // further code goes here
}

注意：在fullscreenElement中screen是小写。下面是夸浏览器的写法：

if (document.webkitFullscreenElement ||  document.fullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
// Further code goes here
}

Full-Screen API公开了两个方法来控制指定元素进入全屏或退出全屏模式。

requestFullscreen()
exitFullscreen()

element.requestFullscreen()

这个方法实现一个指定元素进入全屏模式。例如：

document.getElementById("element id goes here").requestFullscreen();

注意：screen是小写。下面是夸浏览器的写法：

var ele = document.getElementById("element id goes here");
// going full-screen
if (ele.requestFullscreen) {
    ele.requestFullscreen();
}
else if (ele.webkitRequestFullscreen) {
    ele.webkitRequestFullscreen();
}
else if (ele.msRequestFullscreen) {
    ele.msRequestFullscreen();
}
else if (ele.mozRequestFullScreen) {
    ele.mozRequestFullScreen();
}

document.exitFullscreen

这个方法用来取消全屏模式。

document.exitFullscreen;

注意：以前版本这个方法的名字是cancelFullScreen，现在Firefox仍在使用它。下面是夸浏览器的写法：

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

全屏模式CSS(Full-Screen CSS)

:fullscreen {
/* properties */
}

注意：以前版本使用的名字是:full-screen，现在Firefox和webkit内核浏览器仍在使用它。下面是夸浏览器的写法：

:fullscreen {
/* properties */
}
:-webkit-full-screen {
/* properties */
}
:-ms-fullscreen {
/* properties */
}
:-moz-full-screen {
/* properties */
}
  
::backdrop {
  /* properties */
}
::-ms-backdrop {
  /* properties */
}

演示

这里的demo使用了html5全屏模式FullScreen API使一个元素进入全屏模式。查看：全屏模式demo

HTML

<!-- This is out simple HTML Code -->
<div class="mainwrapper">
    <h2>HTML5 FullScreen API Demo</h2>
    <div id="screen" class="fullscreen">  
        <img src="images/logo.jpg">  
        <span class="full-button"></span>  
    </div>
    <p>Click the letter 'F' on top right corner to toggle full-screen view.</p>
</div>

CSS

<style>
.mainwrapper {
    width: 38%;
    margin: 0 auto;
}

.mainwrapper h2 {
 text-align:center;
}

.mainwrapper p{
 font-size:12px;
 color:black;
 text-align:center;
 font-family:sans-serif;
 padding-top:15px;
}

.fullscreen {
    position: relative;
}

.fullscreen img {
    max-width: 100%;
    border: 8px solid #69A5F1;
    box-shadow: 5px 5px 45px #69A5F1;
}

.fullscreen .full-button {
    display: inline-block;
    z-index: 105;
    height: 32px;
    width: 32px;
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
}

.fullscreen .full-button:after {  
    display: inline-block;  
    width: 100%;  
    height: 100%;  
    font-size: 34px;  
    cursor: pointer;  
    color: #fff; 
    content: "F";  
}  
</style>

JAVASCRIPT

<script>
$(document).ready(function(){
    $('.full-button').on('click', function(){
        var docelem = document.getElementById('screen');
        
        if (docelem.requestFullscreen) {
            docelem.requestFullscreen();
        }else if (docelem.webkitRequestFullscreen) {
            docelem.webkitRequestFullscreen();
        } else if(docelem.mozRequestFullScreen) {
            docelem.mozRequestFullScreen();
        } else if(docelem.msRequestFullscreen) {
            docelem.msRequestFullscreen();
        }
        
    });
});
</script>