HTML第55中学与页面显示相关的API,HTML5提供了意气

日期:2019-11-09编辑作者:前端科技

HTML5中与页面展现相关的API

2015/05/15 · HTML5 · HTML5

初藳出处: 涂根华的博客   

在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时,大家首先需求看清当前客户所选择的浏览器以致该浏览器是或不是辅助。代码如下判定:

JavaScript

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'; }

1
2
3
4
5
6
7
8
9
10
11
12
13
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代码如下:

JavaScript

<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>

1
2
3
4
5
6
7
<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代码如下:

JavaScript

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.add伊夫ntListener('ended',videoEnded,false); videoElement.addEventListener('play',videoPlay,false); videoElement.add伊夫ntListener('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 = "播放"; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
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。代码如下:

JavaScript

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

1
2
3
4
5
6
7
8
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属性和措施将前段时间页面或某些成分设定为非全屏呈现状态。

平日来讲代码:

JavaScript

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

1
2
3
4
5
6
7
if(document.exitFullscreen) {
    document.exitFullscreen();
}else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
}else if(document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
}

在Fullscreen API中,能够通过监听DOM对象或某些成分的fullscreenchange事件(当页面或因素从非全屏展现状态产生全屏彰显状态,或从全屏呈现状态变为非全屏展现状态时触发)。代码如下:

JavaScript

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

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

在css样式代码中,咱们可以行使伪类采用器来单独钦命处于全屏显示状态的页面或因素样式:

JavaScript

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

1
2
3
4
5
6
7
8
9
html:-moz-full-screen {
    background:red;
}
html:-webkit-full-screen {
    background:red;
}
html:fullscreen {
    background:red;
}

末段我们来看一个demo,在页面中有一个按键,点击后,页面会形成全屏状态,再点击后,页面会脱离全屏;

HTML代码如下:

JavaScript

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

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

Javascript如下:

JavaScript

var docElm = document.documentElement; var fullscreentState = document.getElementById("fullscreentState"); var btnFullScreen = document.getElementById("btnFullScreen"); fullscreentState.style.height = docElm.clientHeight + 'px'; document.add伊芙ntListener('fullscreenchange',function(){ fullscreentState.innerHTML = (document.fullscreen) ? "全屏呈现" : "非全屏展现"; },false); document.add伊芙ntListener('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 = "页面全屏展现"; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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 = "页面全屏显示";
    }
}

赞 收藏 评论

图片 1

HTML5提供了生机勃勃部分非凡苍劲的JavaScript和HTML API,来救助开荒者塑造优越的桌面和活动应用程序。本文将介绍5个流行的API,希望对您的付出职业具备助于。

 

  1.  全屏API(Fullscreen API)

 

  该API允许开辟者以编制程序格局将Web应用程序全屏运转,使Web应用程序更像本地应用程序。

 

 

//

 找到相符浏览器的全屏方法

 

function

 

launchFullScreen(element) {

 

  if(element.requestFullScreen)

 {

 

    element.requestFullScreen();

 

  }

else

 

if(element.mozRequestFullScreen)

 {

 

    element.mozRequestFullScreen();

 

  }

else

 

if(element.webkitRequestFullScreen)

 {

 

    element.webkitRequestFullScreen();

 

  }

 

}

 

  

 

//

 运转全屏格局

 

launchFullScreen(document.documentElement);

//

 the whole page

 

launchFullScreen(document.getElementById("videoElement"));

//

 any individual element

  教程 / 演示

 

  2.  页面可知性API(Page Visibility API卡塔尔

 

  该API能够用来检验页面临于客商的可知性,即重回顾客眼下浏览的页面或标签的景观变化。

 

 

//

 设置隐敝属性和可以知道校正事件的称呼,属性须要加浏览器前缀

 

//

 since some browsers only offer vendor-prefixed support

 

var

 

hidden, state, visibilityChange; 

 

if

 

(typeof

 

document.hidden !== "undefined")

 {

 

  hidden

 = "hidden";

 

  visibilityChange

 = "visibilitychange";

 

  state

 = "visibilityState";

 

}

else

 

if 

(typeof

 

document.mozHidden !== "undefined")

 {

 

  hidden

 = "mozHidden";

 

  visibilityChange

 = "mozvisibilitychange";

 

  state

 = "mozVisibilityState";

 

}

else

 

if 

(typeof

 

document.msHidden !== "undefined")

 {

 

  hidden

 = "msHidden";

 

  visibilityChange

 = "msvisibilitychange";

 

  state

 = "msVisibilityState";

 

}

else

 

if 

(typeof

 

document.webkitHidden !== "undefined")

 {

 

  hidden

 = "webkitHidden";

 

  visibilityChange

 = "webkitvisibilitychange";

 

  state

 = "webkitVisibilityState";

 

}

 

  

 

//

 增添三个题名退换的监听器

 

document.addEventListener(visibilityChange,

function(e)

 {

 

  //

 开头或终止状态管理

 

},

false);

  教程 / 演示

 

  3.  getUserMedia API

 

  该API允许Web应用程序访谈录像头和Mike风,而无需利用插件。

 

 

//

 设置事件监听器

 

window.addEventListener("DOMContentLoaded",

function()

 {

 

  //

 获取成分

 

  var

 

canvas = document.getElementById("canvas"),

 

    context

 = canvas.getContext("2d"),

 

    video

 = document.getElementById("video"),

 

    videoObj

 = { "video":

true

 

},

 

    errBack

 = function(error)

 {

 

      console.log("Video

 capture error: ",

 error.code); 

 

    };

 

  

 

  //

 设置video监听器

 

  if(navigator.getUserMedia)

 { //

 Standard

 

    navigator.getUserMedia(videoObj,

function(stream)

 {

 

      video.src

 = stream;

 

      video.play();

 

    },

 errBack);

 

  }

else

 

if(navigator.webkitGetUserMedia)

 { //

 WebKit-prefixed

 

    navigator.webkitGetUserMedia(videoObj,

function(stream){

 

      video.src

 = window.webkitURL.createObjectURL(stream);

 

      video.play();

 

    },

 errBack);

 

  }

 

},

false);

  教程 / 演示

 

  4.  电池API(Battery API)

 

  那是二个针对移动器械应用程序的API,首要用以检查测量试验设备电瓶音信。

 

 

 

var

 

battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery;

 

  

 

//

 电瓶质量

 

console.warn("Battery

 charging: ",

 battery.charging); //

 true

 

console.warn("Battery

 level: ",

 battery.level); //

 0.58

 

console.warn("Battery

 discharging time: ",

 battery.dischargingTime);

 

  

 

//

 增加事件监听器

 

battery.addEventListener("chargingchange",

function(e)

 {

 

  console.warn("Battery

 charge change: ",

 battery.charging);

 

},

false);

  教程

 

  5.  Link Prefetching

 

  预加载网页内容,为浏览者提供贰个平整的浏览体验。

 

 

<!--

 full page -->

 

<link

 

rel="prefetch"

 

href=""

 

/>

 

  

 

<!--

 just an image -->

 

<link

 

rel="prefetch"

 

href="

 

/>

API,来扶持开采者创设能够的桌面和活动应用程序。本文将介绍5个流行的API,希望对您的花销工作...

本文由今晚最快开奖现场直播发布于前端科技,转载请注明出处:HTML第55中学与页面显示相关的API,HTML5提供了意气

关键词:

Chrome开发者工具不完全指南,谷歌Chrome浏览器开

Chrome开采者工具不完全指南(二、进级篇卡塔尔 2015/06/23 · HTML5 · 3评论 ·Chrome 原著出处:卖烧烤夫斯基    上篇向...

详细>>

污源回笼机制,质量进级篇

Chrome开拓者工具不完全指南(四、质量晋级篇卡塔 尔(英语:State of Qatar) 2015/07/05 · HTML5 ·Chrome 原著出处:卖撸串...

详细>>

跨域哀告,跨域访谈和防盗链基本原理

跨域访问和防盗链基本原理(二) 2015/10/18 · HTML5 ·跨域,防盗链 原文出处: 童燕群(@童燕群)    Asynchronous JavaS...

详细>>

十大卓越排序算法

十大经典排序算法 2016/09/19 · 基础技术 ·7 评论 ·排序算法,算法 本文作者: 伯乐在线 -Damonare。未经作者许可,禁止...

详细>>