API详细介绍,HTML5提供了一些可怜强盛的JavaScript和HTML

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.add伊夫ntListener(visibilityChange,handle,false); videoElement =
document.getElementById(“videoElement”);
videoElement.addEventListener(‘ended’,videoEnded,false);
videoElement.add伊芙ntListener(‘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:百分之百;”
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.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
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全屏(Fullscreen)API详细介绍,html5fullscreen

那篇文章首要介绍了HTML5全屏(Fullscreen)API详细介绍,本文给出了运行全屏形式和分离全屏形式代码示例,相同的时间讲授了Fullscreen
属性与事件,须求的对象能够参照下

在一发真实的web应用程序中,JavaScript也变得尤为给力.

FullScreen API 是贰个新的JavaScript API,简单而又强盛. FullScreen
让大家可以通过编制程序的章程来向客户央浼全屏展现,假若交互达成,随就能够以脱离全屏状态.

在线演示德姆o:  Fullscreen API Example

(在这里德姆o中,能够Launch ,Hide
,以致Dump彰显相关属性,能够经过chrome的调整台查看日志音信.)

启航全屏形式

全屏API
requestFullscreen方法在有些老的浏览器里面依旧选用带前缀方式的方法名,因而恐怕需求实行检验判别:
(带前缀,意思就是逐风流倜傥浏览器内核不通用.)

API详细介绍,HTML5提供了一些可怜强盛的JavaScript和HTML。代码如下:
// 找到援助的不二秘技, 使用须求全屏的 element 调用
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();
}
}

// 在辅助全屏的浏览器中运转全屏
// 整个页面
launchFullScreen(document.documentElement);
// 某些成分
launchFullScreen(document.getElementById(“videoElement”));

将索要全屏展现的DOM成分作为参数,调用此办法即可让window进入全屏状态,不常候恐怕供给顾客同意(浏览器自身和顾客交互),若是客户拒绝,则或者出现各类不完全的全屏.

万大器晚成客户同意步入全屏,那么工具栏以至别的浏览器组件会掩饰起来,使document框架的增加率和可观横跨全数荧屏.

抽离全屏情势

选取 exitFullscreen 方法能够使浏览器退出全屏,重返原先的布局.
该办法在局地老的浏览器上也是支撑前缀方法.

代码如下:
// 退出 fullscreen
function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozExitFullScreen) {
document.mozExitFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}

// 调用退出全屏方法!
exitFullscreen();

请小心: exitFullscreen 只可以通过 document 对象调用 —— 并不是行使普通的
DOM element.

Fullscreen 属性与事件

一个坏消息,到近日截止,全屏事件和方法仍为带前缀的,好消息就是高速主流浏览器就能都扶持。

1.document.fullscreenElement:  当前高居全屏状态的要素 element.
2.document.fullscreenEnabled:  标志 fullscreen 当前是不是可用.

当步向/退出 全屏情势时,会触发 fullscreenchange 事件:

代码如下:
var fullscreenElement =
document.fullscreenEnabled
|| document.mozFullscreenElement
|| document.webkitFullscreenElement;
var fullscreenEnabled =
document.fullscreenEnabled
|| document.mozFullscreenEnabled
|| document.webkitFullscreenEnabled;

在初叶化全屏方法时,能够探测要求监听哪多少个事件.

Fullscreen CSS

浏览器提供了有的实用的 fullscreen CSS 调控法则:

代码如下:
/* html */
:-webkit-full-screen {
/* properties */
}
:-moz-fullscreen {
/* properties *API详细介绍,HTML5提供了一些可怜强盛的JavaScript和HTML。/
}

:fullscreen {
/* properties */
}

/* deeper elements */
:-webkit-full-screen video {
width: 100%;
height: 100%;
}

/* styling the backdrop */
::backdrop {
/* properties */
}

在好几情形下,WebKit须要一些破例管理,所以在拍卖多媒体时,你恐怕必要地点的代码。

本身感到 Fullscreen API 顶尖轻易,一级有用. 笔者第二次见到那个 API 是在二个名称为MDN’s BananaBread demo 的全客商端第一人称格不以为意游戏,
那真是叁个应用全屏形式的绝佳案例。

全屏API提供了步入和退出全屏形式的法子,并提供对应的风云来监测全屏状态的改观,所以各个地区面都连贯起来了.

请牢记这几个很好的API吧 —— 在现在的某些时刻,它肯定会派上用场!

那篇作品首要介绍了HTML5全屏(Fullscreen)API详细介绍,本文给出了开发银行全屏格局和退出全屏格局代码…

HTML5提供了有的不胜有力的JavaScript和HTML
API,来扶助开采者创设突出的桌面和移动应用程序。本文将介绍5个新型的API,希望对您的支出职业具备助于。

一、video的js知识点:

 

controls(调节器)、autoplay(自动播放)、loop(循环)==video暗中同意的;

  1.  全屏API(Fullscreen API)

自定义播放器中有的JS中提供的秘诀和品质的笔录:

 

1、play()调控摄像的播放

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

2、pause()调节录像的小憩

 

3、currentTime调整摄像的当下光阴

 

4、muted调整录制是不是静音(赋值true or false)

//

5、volume调整音量的分寸(赋值0-1)

 找到切合浏览器的全屏方法

6、duration录制的总时间

 

7、ontimeupdate事件(当前播发地方变动时进行,使用时要绑定add伊夫ntListener)

function

8、requestFullscreen全屏

 

二、全屏API介绍

launchFullScreen(element) {

浏览器全屏API简史

 

1、第一个贯彻浏览器原生全屏API的是在Safari
5.0(和iOS)中加上的webkitEnterFullScreen()函数,但是它不得不在Safar的<video>标签的controls中。

  if(element.requestFullScreen)

2、在Safari
5.第11中学,苹果更新了那一个API使它更近乎于Mozilla的全屏API草案(实际上那要比苹果达成的更早),未来,全体的DOM成分都能够调用webkitRequestFullScreen()函数使HTML页面步入到全屏情势。

 {

3、Firefox和Chome发布它们将会增添原生的全屏API扶持,而且以此特点已经在Chome
15+以致Firefox10+中落实,Mozilla共青团和少先队生机勃勃度公布了风华正茂部分。

 

4、在二〇一一年七月18日,W3C公布了意气风发份全屏API草案(由Opera团队的一名成员编写),它跟Mozilla的草案有五个主要的不一样点:

    element.requestFullScreen();

  1. Mozilla/Webkit使用大写字母’S’(FullScreen),但W3C则不是(Fullscreen)
  2. Mozilla/Webkit使用cancelFullScreen,W3C使用exitFullscreen

 

5、更新 (11/15/2011):来自IEBlog的Ted
Johnson说IE10将不会支持全屏API (12/05/二零一三:
小编对Ted的首先封email精通错了)IE10的费用团队还不曾决定是不是要兑现全屏API。不过,他建议:Win8的
Metro风格的Internet
Explorer始终是全屏状态,正如早先那么,按F11键就可以踏向全屏格局。

  }

浏览器全屏API

else

要跻身全屏方式,能够调用须要进入全屏成分的requestFullScreen(或许W3C的
requestFullscreen)方法。。要抽离全屏,则调用document对象的cancelFullScreen(也许W3C的exitFullscreen)方法。

 

代码:

if(element.mozRequestFullScreen)

全屏

 {

var docElm = document.documentElement;
//W3C
if(docElm.requestFullscreen){

 

docElm.requestFullscreen();

    element.mozRequestFullScreen();

}
//FireFox
else if (docElm.mozRequestFullScreen) {

 

docElm.mozRequestFullScreen();

  }

}
//Chrome等
else if (docElm.webkitRequestFullScreen) {

else

docElm.webkitRequestFullScreen();

 

}
//IE11
else if (elem.msRequestFullscreen) {

if(element.webkitRequestFullScreen)

elem.msRequestFullscreen();

 {

}

 

退出全屏

    element.webkitRequestFullScreen();

if (document.exitFullscreen) {

 

document.exitFullscreen();

  }

}

 

else if (document.mozCancelFullScreen) {

}

document.mozCancelFullScreen();

 

}

  

else if (document.webkitCancelFullScreen) {

 

document.webkitCancelFullScreen();

//

}

 运营全屏情势

else if (document.msExitFullscreen) {

 

document.msExitFullscreen();

launchFullScreen(document.documentElement);

}

//

监听是不是全屏

 the whole page

document.addEventListener(“fullscreenchange”, function(){

 

fullscreenState.innerHTML = (document.fullscreen)? “” : “not “;},
false);

launchFullScreen(document.getElementById(“videoElement”));

document.addEventListener(“mozfullscreenchange”, function () {

//

fullscreenState.innerHTML = (document.mozFullScreen)? “” : “not “;},
false);

 any individual element

document.addEventListener(“webkitfullscreenchange”, function () {

  教程 / 演示

fullscreenState.innerHTML = (document.webkitIsFullScreen)? “” : “not
“;}, false);

 

document.addEventListener(“msfullscreenchange”, function () {

  2.  页面可以看到性API(Page Visibility API)

fullscreenState.innerHTML = (document.msFullscreenElement)? “” : “not
“;}, false);

 

全屏是的体制设置

  该API可以用来检查实验页面前蒙受于客商的可知性,即重临客商眼下浏览的页面或标签的景况变化。

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

 

https://www.cnblogs.com/duanlianjiang/p/5557015.html

 

//

 设置隐敝属性和可以预知更改事件的称呼,属性须求加浏览器前缀

 

//

 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应用程序访谈录像头和话筒,而不需求利用插件。

 

 

//

 设置事件监听器

 

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,希望对您的开辟专门的职业…

Leave a Comment.