菜单

HTML5备受同页面展现相关的API

2018年12月15日 - Html/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+;

manbetx2.0手机版,实现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伊夫(Eve)ntListener(visibilityChange,handle,false); videoElement =
document.getElementById(“videoElement”);
videoElement.add伊夫(Eve)ntListener(‘ended’,videoEnded,false);
videoElement.add伊夫(Eve)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.current提姆(Tim)e = 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.add伊芙(Eve)ntListener(‘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 = "页面全屏显示";
    }
}

赞 收藏
评论

manbetx2.0手机版 1

    上一次写了关于HTML的上传API,XMLHttpRequest2.0的上传方式,以及HTML5中上传之前本地的预览,包括对于图片以及部分信息的预
览。这次我们就讲下HTML5中关于上传的一些各种个性化需求的处理,主要包括实时进度条,上传速度的实时显示等。

至于上传事件

先是使形成实时进度条这种需要,首先大家要拿到有关上传的各个风波,这么些事件大部分都是当XMLHttpRequest这一个目的下:

个中progress事件分为上传和下载二种情状,上传的时候progress事件实际上是以XMLHttpRequest.upload对象下,而下载的时刻属于XMLHttpRequest对象

至于实时进度长条

我们可以以达成篇被的措施基础及开展扩大来描写实时进度修的不二法门,

var xhr=new XMLHttpRequest();  
var formData=new FormData();  
formData.append('name',"Jack");  
formData.append('uid',666666);  
xhr.open("post",url);  
xhr.send(formData);  
//上传中
xhr.upload.addEventListener("progress", uploadProgress, false);
//上传成功
xhr.addEventListener("load", uploadComplete, false);
//上传出错
xhr.addEventListener("error", uploadFailed, false);
//上传取消
xhr.addEventListener("abort", uploadCanceled, false);

尽管上传事件还我们提供了下这多少个数量

经过下边那一个事件及性能就得挺轻易之抒写来进度久。

function uploadProgress(evt){   //evt 上传事件中返回的数据
    if (evt.lengthComputable) { //判断进度是否可以计算
        var percentComplete = Math.round(evt.loaded * 100 / evt.total); //对进度进行计算并且格式化
        document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';     //输出100%
    }else {
        document.getElementById('progressNumber').innerHTML = 'unable to compute';
    }
}

方那个方法是直接当某div中一向显示百分比的数字,假设大家用做进度漫漫也不行简单,可以添加一个签,默认宽度为0,然后以uploadProgress方法中动态更改标签的小幅,单位吗百分比,而值就是是percentComplete,这样好以上传的过程中获取一个整机的速长。

假如当大家文件上传完毕后好于load事件中绑定的uploadComplete方法吃错过举办有css等UI的修改。

至于实时上污染速度的显示

现进度漫漫发出了,但是大家尚怀念清楚速度是多少应该怎么处置为。

足因而测算的计取得其上传的速,我们于progress事件被是亮已经上传的文件大小的,这我们以uploadProgress方法被莫了1秒都失去总结一下立即同一浅和达标同样浅的loaded大小就足以知道其每秒的上传速度。从而以页面及实时的更新当前的上传速度了。

代码如下

// currentLoadedBytesb本次上传的数据总量,
// lastLoadedBytes 上一次上传的数据总量
// oldObjUploadBits旧的上传速度
var currentLoadedBytes,lastLoadedBytes,oldObjUploadBits;
timer = setInterval(
    function () {
        var bytesCount = currentLoadedBytes - lastLoadedBytes;
        if (bytesCount !== 0) {
            var speed = ConvertBytesUnit(bytesCount);
            $(obj).html("上传速度:" + speed.number + speed.unit + "/s");
        } else {
            $(obj).html(oldObjUploadBits);
        }
        oldObjUploadBits = $(obj).html();
        lastLoadedBytes = currentLoadedBytes;
    }
, 1000)   

function ConvertBytesUnit(size){
    if (size < 0) size = 0;
    var result = {};
    if (size > 1024 * 1024) {
        result.number = (size / (1024 * 1024)).toFixed(2);
        result.unit = "MB";
    } else if (size > 1024 ) {
        result.number = (size / 1024).toFixed(2);
        result.unit = "KB";
    } else {
        result.number = size.toFixed(2);
        result.unit = "B";
    }
    return (result);
}    

经过地点的方就是得取各国一样秒具体的上传速度了。

除此以外XMLHttpRequest2.0好实现的功用实在过多,此外还得兑现断点续传,以及分片上传等又高级的功用。我们留下于产同样首再来说。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图