全球彩票平台_全球彩票注册平台|官网下载地址

热门关键词: 全球彩票平台,全球彩票注册平台,全球彩官网下载地址

【全球彩官网下载地址】HTML5提供了有的不胜刚劲

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

在HTML第55中学,新扩大了二个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 */
}

在好几意况下,Web基特需求有的特有管理,所以在管理多媒体时,你只怕要求地方的代码。

本身感觉 Fullscreen API 一级轻易,一级有用. 小编第四回探问那些 API 是在一个名字为MDN's BananaBread demo 的全顾客端第壹人称ACG游戏, 那真是多个应用全屏格局的绝佳案例。

全屏API提供了步入和抽离全屏情势的秘诀,并提供相应的风浪来监测全屏状态的更换,所以外省点都连贯起来了.

请记住那个很好的API吧 —— 在未来的某部时刻,它必然会派上用场!

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

HTML5提供了一些卓殊苍劲的JavaScript和HTML API,来支援开垦者创设优异的桌面和移动应用程序。本文将介绍5个流行的API,希望对你的花费工作有着扶助。

一、video的js知识点:

HTML5落到实处页面切换激活的PageVisibility API使用初探,pagevisibilityapi

HTMl5 推出了八个很“非常”的 API Page Visibility ,之所以说它非常,是因为那几个 API 关怀的是一个相当少人注指标魔法 —— 浏览器标签( tab ) 是或不是被激活。这里不可不解释一下,这一个“激活”,指的是那么些标签是或不是正被顾客浏览,也许说是还是不是为方今标签。

那么,这些 API 毕竟多少什么用场呢?经常,非常多观念的页面在顾客未有激活它的时候,它还可能会接二连三做事,比如,当顾客正在浏览音信门户,而她后面展开的 National Basketball Association球赛页面会继续刷新获取最新结果,录像网址会继续占领带宽加载财富,于是,假诺那类不须求的行事太多了,就能够形成比较多的能源浪费。因而,那货万分实惠:

Web 程序每间距一段时间会自动更新页面音讯,确定保障客商获得到及时的新闻,不过,当顾客正在浏览其余页面时,能够决定它搁浅更新。
录像网址在播音在线录像时会不断加载录制,直到摄像加载达成,不过,当客商正在浏览别的页面时,能够暂停加载录像财富,节省带宽。
网站首页上有个大幻灯自动播放,当客商浏览别的页面了,就能够暂停止播放放。
于是乎,通过 Page Visibility ,大家能够致少达到以下一种或两种的功利:

1.节省服务器能源,Ajax 轮询那类服务器能源占用平时会被忽略,关闭这种央求可以节省能源。
2.节外省部存款和储蓄器消耗。
3.节省带宽消耗。

所以,使用 Page Visibility 无论是对于用户还是服务器都有补益。

接下去正式介绍一下以此 API 。Page Visibility 会在浏览器的 document 对象上加多多个属性 hidden 和 visibilityState 。假设当前的竹签被激活了,那么 document.hidden 的值为 false ,不然为 true 。visibilityState 则有4个只怕值:

hidden:当浏览器最小化、切换标签、计算机锁屏时 visibilityState 值是 hidden
visible:当浏览器最超级上下文(context)的 document 起码展现在一个荧屏中间时,再次回到visible;当浏览器窗口未有最小化,不过浏览器被其余使用遮挡时,这时也为 visible
prerender:当文书档案被加载到荧屏画面以外大概不可知时回来 prerender,那个是非供给属性,浏览器可选用性的协理。
unloaded:当文书档案将要被离开 ( unload ) 时返回unloaded,浏览器也可选拔性的援救那几个本性
其余,document 上会加多 visibilitychange 事件,当 document 的可知性退换时触发该事件。

好了,介绍完属性,放上贰个 Demo (伸开后切换标签就能够测量检验)。

其一 Demo 的魔法是监听标签的可以见到性是或不是改变,况且在标签可以知道性产生转移时发出提示。

值得注意的是,在时下,浏览器对于 Page Visibility 的辅助依然通过个人属性扶助,因而在检查评定或应用 Page Visibility 提供的性质时要求增多浏览器私有前缀,举例在 Chrome 中检查评定方面的visibilityState 属性时,就须求检测 document.webkitVisibilityState 并不是document.visibilityState 。所以,德姆o 中会首先检查评定浏览器类型,然后才使用 Page Visibility 的 API 。首要代码如下:

JavaScript Code复制内容到剪贴板

  1. function browerKernel(){   
  2.     
  3.     var result;   
  4.     
  5.     ['webkit', 'moz', 'o', 'ms'].forEach(function(prefix){   
  6.     
  7.         if( typeof document[ prefix   'Hidden' ] != 'undefined' ){   
  8.             result = prefix;   
  9.         }   
  10.     });   
  11.     
  12.     return result;   
  13.     
  14. }   
  15.     
  16. function init(){   
  17.     
  18.     prefix = browerKernel();   
  19.     
  20.     var showTip = document.getElementById('showTip');   
  21.     
  22.     document.addEventListener( prefix    'visibilitychange', function onVisibilityChange(e){   
  23.     
  24.         var tip = null;   
  25.                 
  26.         if( document[ prefix   'VisibilityState' ] == 'hidden' ) tip = '<p>离开页面</p>';   
  27.         else if( document[ prefix   'VisibilityState' ]  == 'visible' ) tip = '<p>进入页面</p>';   
  28.     
  29.         showTip.innerHTML = showTip.innerHTML   tip;   
  30.     });   
  31. }   
  32.     
  33. window.onload = init();   
  34.   

再再来看一个现实的例证,代码如下:

JavaScript Code复制内容到剪贴板

  1. <!DOCTYPE HTML>       
  2. <html>       
  3. <head>       
  4.      <script type="text/javascript">       
  5.           timer = 0;       
  6.           function onLoad(){       
  7.                document.addEventListener("visibilitychange",stateChanged);       
  8.                document.addEventListener("webkitvisibilitychange", stateChanged);       
  9.                document.addEventListener("msvisibilitychange", stateChanged);       
  10.           }       
  11.           function stateChanged(){       
  12.                console.log(document.webkitVisibilityState);       
  13.                if(document.hidden || document.webkitHidden || document.msHidden){       
  14.                     //new tab or window minimized     
  15.                     timer = new Date().getTime();       
  16.                }       
  17.                else {       
  18.                     alert('You were away for '   (new Date().getTime()-timer)/1000  ' seconds.')       
  19.                }       
  20.           }       
  21.      </script>       
  22. </head>       
  23. <body onLoad="onLoad()">       
  24. </body>       
  25. </html>    

在下边包车型地铁代码中,同样,在CHROME运维下,在LOAD事件中,监听了连带的 webkitvisibilitychange事件(那么些在CHROME下),借使是IE 10,则是 msvisibilitychange事件,然后在回调函数中,开头了计算客商在页面停留的时光, 所以当你展开其余TAB页恐怕最小化后,再切换回原本那么些页,则会JAVASC奥迪Q5IPT 弹出显示:你离开了页面多久 。
要小心的是,在CHROME中,属性命名称叫webkitHidden,事件为 webkitvisibilitychange事件,而在IE 第10中学,属性为msHidden 和 msVisibilityState.

API使用初探,pagevisibilityapi HTMl5 推出了三个相当特别的 API Page Visibility ,之所以说它非常,是因为这几个...

 

controls(控制器)、autoplay(自动播放)、loop(循环)==video暗许的;

  1.  全屏API(Fullscreen API)

自定义播放器中一些JS中提供的诀窍和属性的记录:

 

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

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

2、pause()调整摄像的休息

 

3、current提姆e调整录制的这段时间时间

 

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

//

5、volume调节音量的大小(赋值0-1)

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

6、duration摄像的总时间

 

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

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、在二零一三年一月六日,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

 

本文由全球彩票平台发布于全球彩官网下载地址Web前端,转载请注明出处:【全球彩官网下载地址】HTML5提供了有的不胜刚劲

TAG标签: 全球彩票平台
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。