HTML5中与页面显示相关的API

HTML5中与页面显示相关的API

    在HTML5中，增加了2个与页面显示相关的API，分别是Page Visibility API与Fullscreen API; 作用分别如下：

    Page Visibility API  是指当页面变为最小化状态或者用户将浏览器标签切换到其他标签时会触发。

    Fullscreen API 是将页面整体或页面中某个局部区域设为全屏。

Page Visibility API的使用场合如下：

1. 一个应用程序中具有多幅图片的幻灯片式的连续播放功能，当页面变为不可见状态(最小化状态或者将用户浏览器标签切换到其他标签时)，图片停止播放，当页面变为可见状态时，图片继续播放。
2. 在一个实时显示服务器端信息的应用程序中，当页面处于不可见状态(最小化状态或者将用户浏览器标签切换到其他标签时)，停止定期向服务器端请求数据的处理，当页面变为可见状态,继续执行定期向服务器端请求数据的处理。
3. 在一个具有播放视频功能的应用程序中，当页面处于不可见状态(最小化状态或者将用户浏览器标签切换到其他标签时)，暂停播放视频，当页面变为可见状态时，继续播放视频。

浏览器支持程度：Firefox10+，chrome14+，IE10+；

实现Page Visibility API

    在使用Page Visibility API时，我们首先需要判断当前用户所使用的浏览器以及该浏览器是否支持。代码如下判断：

if(typeof document.hidden !== 'undefined') {
    hidden = 'hidden';
    visibilityChange = 'visibilitychange';
}else if(typeof document.mozHidden !== 'undefined') {
    hidden = 'mozHidden';
    visibilityChange = 'mozvisibilitychange';
}else if(typeof document.msHidden !== 'undefined') {
    hidden = 'msHidden';
    visibilityChange = 'msvisibilitychange';
}else if(typeof document.webkitHidden !== 'undefined') {        
    hidden = 'webkitHidden';
    visibilityChange = 'webkitvisibilitychange';
}

如上，在Page Visibility  API中，可以通过document对象的hidden属性值来判断页面是否处于可见状态，当页面处于可见状态时属性值为false，当页面处于不可见状态时属性值为true。

在Page Visibility中，可以通过document对象的visibilityState属性值来判断页面的可见状态。该属性值为一个字符串，其含义如下所示：

    visible: 页面内容部分可见，当前页面位于用户正在查看的浏览器标签窗口中，且浏览器窗口未被最小化。

    hidden: 页面内容对用户不可见。当前页面不在用户正在查看的浏览器标签窗口中，或浏览器窗口已被最小化。

    prerender: 页面内容已被预渲染，但是对用户不可见。

现在我们来看一个demo，页面中有一个video元素与一个”播放”按钮，用户单击”播放”按钮时 按钮文字变为 ’暂停”，同时开始播放video元素的视频，当页面变为最小化状态或用户浏览器标签切换到其他标签时候，视频被暂停播放，当页面恢复正常状态或用户将浏览器标签切回页面所在标签时，视频继续播放。

HTML代码如下：

<video id="videoElement" controls width=640 height=360 autoplay>
    <source src="Wildlife/Wildlife.ogv" type='video/ogg; codecs="theora, vorbis"'/>
    <source src="Wildlife/Wildlife.webm" type='video/webm' >
    <source src="Wildlife/Wildlife.mp4" type='video/mp4'>
</video>
<button id="btnPlay" onclick="PlayOrPause()">播放</button>
<div style="height:1500px;"></div>

JS代码如下：

var hidden,
visibilityChange,
videoElement;
if(typeof document.hidden !== 'undefined') {
    hidden = 'hidden';
    visibilityChange = 'visibilitychange';
}else if(typeof document.mozHidden !== 'undefined') {
    hidden = 'mozHidden';
    visibilityChange = 'mozvisibilitychange';
}else if(typeof document.msHidden !== 'undefined') {
    hidden = 'msHidden';
    visibilityChange = 'msvisibilitychange';
}else if(typeof document.webkitHidden !== 'undefined') {
    hidden = 'webkitHidden';
    visibilityChange = 'webkitvisibilitychange';
}
document.addEventListener(visibilityChange,handle,false);
videoElement = document.getElementById("videoElement");
videoElement.addEventListener('ended',videoEnded,false);
videoElement.addEventListener('play',videoPlay,false);
videoElement.addEventListener('pause',videoPause,false);
// 如果页面变为不可见状态 则暂停视频播放
// 如果页面变为可见状态，则继续视频播放
function handle() {
    // 通过visibilityState属性值判断页面的可见状态
    console.log(document.visibilityState);
    if(document[hidden]) {
        videoElement.pause();    
    }else {
        videoElement.play();
    }
}
// 播放视频
function play() {
    videoElement.play();
}
// 暂停播放
function pause() {
    videoElement.pause();
}
function PlayOrPause() {
    if(videoElement.paused) {
        videoElement.play();
    }else {
        videoElement.pause();
    }
}
function videoEnded(e) {
    videoElement.currentTime = 0;
    this.pause();
}
function videoPlay(e) {
    var btnPlay = document.getElementById("btnPlay");
    btnPlay.innerHTML = "暂停";
}
function videoPause(e) {
    var btnPlay = document.getElementById("btnPlay");
    btnPlay.innerHTML = "播放";
}

实现Fullscreen API

   在HTML5中，新增了一个Fullscreen API，其作用是将页面整体或页面中某个局部区域设为全屏显示状态。

   浏览器支持程度：Firefox10+，chrome16+，Safari5.1+

   在Fullscreen API中，可以通过DOM对象的根节点对象或某个元素的requestFullscreen属性值和执行相对应的方法来判断浏览器是否支持Fullscreen API。代码如下：

var docElm = document.documentElement;
if(docElm.requestFullscreen) {
        docElm.requestFullscreen();
}else if(docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();
}else if(docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen();
}

在Fullscreen API中，也可以通过DOM对象或某个元素的exitFullscreen与CanvelFullScreen属性和方法将当前页面或某个元素设定为非全屏显示状态。

如下代码：

if(document.exitFullscreen) {
    document.exitFullscreen();
}else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
}else if(document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
}

在Fullscreen API中，可以通过监听DOM对象或某个元素的fullscreenchange事件(当页面或元素从非全屏显示状态变为全屏显示状态，或从全屏显示状态变为非全屏显示状态时触发)。代码如下：

document.addEventListener('fullscreenchange',function(){},false);
document.addEventListener('mozfullscreenchange',function(){},false);
document.addEventListener('webkitfullscreenchange',function(){},false);

在css样式代码中，我们可以使用伪类选择器来单独指定处于全屏显示状态的页面或元素样式：

html:-moz-full-screen {
    background:red;
 }
 html:-webkit-full-screen {
    background:red;
 }
 html:fullscreen {
    background:red;
 }

最后我们来看一个demo，在页面中有一个按钮，点击后，页面会变成全屏状态，再点击后，页面会退出全屏；

HTML代码如下：

<input type="button" id="btnFullScreen" value="页面全屏显示" onclick="toggleFullScreen();"/>
<div style="width:100%;" id="fullscreentState">非全屏显示</div>

Javascript如下：

var docElm = document.documentElement;
var fullscreentState = document.getElementById("fullscreentState");
var btnFullScreen = document.getElementById("btnFullScreen");
fullscreentState.style.height = docElm.clientHeight + 'px';
document.addEventListener('fullscreenchange',function(){
    fullscreentState.innerHTML = (document.fullscreen) ? "全屏显示" : "非全屏显示";
},false);
document.addEventListener('mozfullscreenchange',function(){
    fullscreentState.innerHTML = (document.mozFullscreen) ? "全屏显示" : "非全屏显示";
},false);
document.addEventListener('webkitfullscreenchange',function(){
    fullscreentState.innerHTML = (document.webkitFullscreen) ? "全屏显示" : "非全屏显示";
},false);
function toggleFullScreen() {
    if(btnFullScreen.value == '页面全屏显示') {
        btnFullScreen.value = '页面非全屏显示';
        if(docElm.requestFullscreen) {
            docElm.requestFullscreen();
        }else if(docElm.mozRequestFullScreen) {
            docElm.mozRequestFullScreen();
        }else if(docElm.webkitRequestFullScreen) {
            docElm.webkitRequestFullScreen();
        }
    }else {
        if(document.exitFullscreen) {
            document.exitFullscreen();
        }else if(document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        }else if(document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        }
        btnFullScreen.value = "页面全屏显示";
    }
}