HTML5中与页面显示相关的API

1、HTML5中与页面显示相关的API

在HTML5中，增加了几个与页面显示相关的API，其中一个是Page Visibility API

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

Page Visibility API的使用场合如下：

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

1.1实现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="GTO.mp4" type='video/mp4'>

</video>

<button id="btnPlay" onclick="PlayOrPause()">播放</button>

<div style="height:1500px;"></div>

JS部分代码如下：

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 = "播放";

}