【澳门金莎娱乐网站】HTML5提供了一些非常强大的

日期:2019-09-10编辑作者:澳门金莎娱乐网站

HTML5中与页面显示相关的API

2015/05/15 · HTML5 · HTML5

初稿出处: 涂根华的博客   

在HTML第55中学,扩大了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.add伊芙ntListener('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 = "播放"; }

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方法在一些老的浏览器里面依然选拔带前缀方式的章程名,因而或许必要开展检查实验推断:
(带前缀,意思便是逐一浏览器内核不通用.)

代码如下:
// 找到援助的主意, 使用须要全屏的 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 */
}

: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 的全客户端第一个人称CAG游戏, 那真是一个应用全屏方式的绝佳案例。

全屏API提供了步向和剥离全屏形式的法门,并提供相应的风浪来监测全屏状态的转移,所以内地点都连贯起来了.

请记住这一个很好的API吧 —— 在今后的某部时刻,它必然会派上用场!

那篇文章首要介绍了HTML5全屏(Fullscreen)API详细介绍,本文给出了开发银行全屏格局和剥离全屏形式代码...

else

docElm.mozRequestFullScreen();

 

controls(调节器)、autoplay(自动播放)、loop(循环)==video默许的;

 

document.msExitFullscreen();

if 

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

 电瓶品质

2、在Safari 5.第11中学,苹果更新了那些API使它更近乎于Mozilla的全屏API草案(实际上那要比苹果达成的更早),今后,全数的DOM成分都足以调用webkitRequestFullScreen()函数使HTML页面进入到全屏格局。

 

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

 

3、currentTime调控摄像的当前天子

function(e)

if (document.exitFullscreen) {

  console.warn("Battery

一、video的js知识点:

 = canvas.getContext("2d"),

elem.msRequestFullscreen();

 

1、第二个完结浏览器原生全屏API的是在Safari 5.0(和iOS)中丰富的webkitEnterFullScreen()函数,但是它只可以在Safar的<video>标签的controls中。

 加多二个题名改动的监听器

document.exitFullscreen();

else

5、更新 (11/15/2011):来自IEBlog的Ted Johnson说IE10将不会支持全屏API (12/05/二〇一三: 作者对特德的率先封email精晓错了)IE10的费用公司还向来不调节是或不是要落到实处全屏API。可是,他提议:Win8的 Metro风格的Internet Explorer始终是全屏状态,正如在此以前这样,按F11键就可以步向全屏形式。

  state

4、muted调控录疑似否静音(赋值true or false)

  教程 / 演示

docElm.webkitRequestFullScreen();

//

document.addEventListener("fullscreenchange", function(){

 

全屏是的体制设置

(typeof

}

    navigator.getUserMedia(videoObj,

else if (document.mozCancelFullScreen) {

 

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

//

自定义播放器中有的JS中提供的章程和总体性的笔录:

document.hidden !== "undefined")

docElm.requestFullscreen();

 = "msVisibilityState";

代码:

 

document.addEventListener("mozfullscreenchange", function () {

 

要跻身全屏形式,能够调用需求步向全屏成分的requestFullScreen(或然W3C的 requestFullscreen)方法。。要剥离全屏,则调用document对象的cancelFullScreen(或然W3C的exitFullscreen)方法。

<link

8、requestFullscreen全屏

 = "msHidden";

7、ontimeupdate事件(当前播发地点变动时举行,使用时要绑定addEventListener)

  visibilityChange

脱离全屏

if 

document.addEventListener("msfullscreenchange", function () {

澳门金莎娱乐网站 , 

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

  visibilityChange

浏览器全屏API

var

监听是还是不是全屏

if(element.mozRequestFullScreen)

1、play()调节录像的播音

 

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

 capture error: ",

}

if(navigator.webkitGetUserMedia)

else if (document.msExitFullscreen) {

 

document.mozCancelFullScreen();

 = { "video":

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

 

3、Firefox和Chome发表它们将会助长原生的全屏API支持,並且那么些特点已经在Chome 15+以及Firefox10+中落到实处,Mozilla团队一度宣布了一些。

 

4、在2013年7月八日,W3C公布了一份全屏API草案(由Opera团队的一名成员编写),它跟Mozilla的草案有七个重要的不一致点:

    errBack

5、volume调节音量的轻重缓急(赋值0-1)

 

}

 

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

 

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

}

}

      console.log("Video

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

  }

二、全屏API介绍

 {

全屏

  hidden

}

  教程 / 演示

浏览器全屏API简史

var

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

  state

else if (document.webkitCancelFullScreen) {

 

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

else

document.webkitCancelFullScreen();

 

2、pause()调控录像的终止

  visibilityChange

6、duration录制的总时间

 battery.charging);

document.addEventListener("webkitfullscreenchange", function () {

else

 

 {

 

 {

  visibilityChange

 设置事件监听器

      video.play();

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

 {

 

 

  hidden

<link

 

 

  }

 

 

 = "webkitVisibilityState";

  }

 

 = function(error)

 = "webkitvisibilitychange";

 

function

href="

 

 since some browsers only offer vendor-prefixed support

 errBack);

launchFullScreen(document.documentElement);

 = "visibilityState";

if(element.webkitRequestFullScreen)

},

 WebKit-prefixed

  if(element.requestFullScreen)

 

console.warn("Battery

 

 any individual element

 

 = "mozVisibilityState";

document.mozHidden !== "undefined")

 

 

 

 

<!--

 

 

 

 

 

  

 

 

false);

 

 

 

 

  

//

  5.  Link Prefetching

 

    };

 

 

  hidden

 = window.webkitURL.createObjectURL(stream);

  教程

 

 

 

 0.58

 discharging time: ",

 

 

 

    element.webkitRequestFullScreen();

 

console.warn("Battery

rel="prefetch"

 

      video.src

  该API允许Web应用程序访问录像头和话筒,而无需选用插件。

}

battery.addEventListener("chargingchange",

 

 

 true

 

document.msHidden !== "undefined")

 {

 

function(stream){

 = "visibilitychange";

 = document.getElementById("video"),

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

 {

 设置video监听器

    navigator.webkitGetUserMedia(videoObj,

(typeof

 

 

window.addEventListener("DOMContentLoaded",

  

 

API,来帮忙开荒者营造能够的桌面和平运动动应用程序。本文将介绍5个新型的API,希望对你的开辟工作...

    video

  4.  电池API(Battery API)

 

  }

false);

 

 

 

  

 

 

 = stream;

  //

},

 

//

 

    element.requestFullScreen();

 = "mozvisibilitychange";

rel="prefetch"

 

document.webkitHidden !== "undefined")

 the whole page

//

launchFullScreen(element) {

 

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

 errBack);

 

}

},

 

 

//

  if(navigator.getUserMedia)

 

  //

(typeof

 

 

if 

HTML5提供了一些卓殊强劲的JavaScript和HTML API,来协助开荒者构建杰出的桌面和移动应用程序。本文将介绍5个新型的API,希望对您的支出职业有着援助。

    },

 

 

 {

  教程 / 演示

 {

 

  这是二个针对性移动道具应用程序的API,首要用于检验设备电瓶音信。

 

 

 

      video.play();

 {

 设置掩盖属性和可知改变事件的称呼,属性要求加浏览器前缀

 

 

 

}

  state

else

 just an image -->

 

function()

 

    videoObj

 增加事件监听器

  3.  getUserMedia API

 {

 

 

 获取成分

 

hidden, state, visibilityChange; 

else

  //

false);

 

 运营全屏格局

  2.  页面可见性API(Page Visibility API)

 

 charging: ",

    context

 {

 {

    element.mozRequestFullScreen();

    },

  该API能够用来检查测试页面前碰到于客户的可知性,即再次回到顾客眼下浏览的页面或标签的情状变化。

  

 

(typeof

canvas = document.getElementById("canvas"),

 

  

 level: ",

 

 

/>

//

 初始或截至状态管理

},

  state

//

<!--

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

 

 

  var

  1.  全屏API(Fullscreen API)

document.addEventListener(visibilityChange,

console.warn("Battery

 

 

 Standard

 = "webkitHidden";

 = "msvisibilitychange";

 

 battery.dischargingTime);

 

 error.code); 

 full page -->

//

 { //

  }

 = "mozHidden";

      video.src

 { //

 

/>

href=""

 

 

 = "hidden";

//

if

 

 battery.level); //

 

 

 battery.charging); //

 

function(e)

}

true

  hidden

 

function(stream)

 

  该API允许开垦者以编制程序形式将Web应用程序全屏运营,使Web应用程序更像本地应用程序。

 charge change: ",

本文由澳门金莎娱乐网站发布于澳门金莎娱乐网站,转载请注明出处:【澳门金莎娱乐网站】HTML5提供了一些非常强大的

关键词:

从雅虎军规看前端性能优化,雅虎前端优化35条规

Web性能优化系列 – 通过提前获取DNS来提升网页加载速度 2015/04/23 · HTML5 ·DNS,性能优化 本文由 伯乐在线 -刘健超-J.c翻...

详细>>

【澳门金莎娱乐网站】ios和Android的一些兼容问题

使用h5新特性,轻松监听任何App自带返回键 2018/07/03 · HTML5 ·H5 原文出处:云叔_又拍云    使用html5新特性轻松监听任...

详细>>

别人家的面试题,蓝杯三十六

别人家的面试题:一个整数是否是“4”的N次幂 2016/05/30 · 基础技术 ·2 评论 ·算法 本文作者: 伯乐在线 -十年踪迹。...

详细>>