5个功能强大的 HTML5 API

2019-09-09 郑州网站建设  

HTML5 新增了许多重要的特性,像 video、audio 和 canvas 等等,这些特性使得能够很容易的网页中包含多媒体内容,而不需要任何的插件或者 API。而其它的新元素,例如 section、article、header 和 nav 等则是用来丰富网页内容。另外还有很多强大的 JavaScript API,下面这5个 HTML5 API 你可能不知道,通过今天这篇新闻可以了解一下。

Fullscreen API

  这个 HTML5 全屏 API 让 Web 开发者可以通过编程控制页面的全屏显示。这个 API 对于 JavaScript 游戏开发非常有用,例如这款单人射击游戏 BananaBread,在全屏状态下玩那是相当酷。



[backcolor=rgb(248, 248, 248) !important]1


2


[backcolor=rgb(248, 248, 248) !important]3


4


[backcolor=rgb(248, 248, 248) !important]5


6


[backcolor=rgb(248, 248, 248) !important]7


8


[backcolor=rgb(248, 248, 248) !important]9


10


[backcolor=rgb(248, 248, 248) !important]11


12


[backcolor=rgb(248, 248, 248) !important]13


14


 

 

[backcolor=rgb(248, 248, 248) !important]// 根据目标元素调用相应的办法
function launchFullScreen(element) {
[backcolor=rgb(248, 248, 248) !important] if(element.requestFullScreen) {
element.requestFullScreen();
[backcolor=rgb(248, 248, 248) !important] } else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
[backcolor=rgb(248, 248, 248) !important] } else if(element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
[backcolor=rgb(248, 248, 248) !important] }
}

// 在支持的浏览器中启动全屏
[backcolor=rgb(248, 248, 248) !important]launchFullScreen(document.documentElement); // 整个页面
launchFullScreen(document.getElementById("videoElement")); // 单个元素

 



  使用教程 在线演示


Page Visibility API

  Page Visibility API 可以帮助开发者监听用户的焦点在哪个页面选项卡上面以及用户在选项库或者窗口之间的移动情况。如果使用合理的话,当焦点不在某个页面上的时候可以停止一些消耗很大的任务。

[size=1em]

[color=rgb(255, 255, 255) !important]

 


[backcolor=rgb(248, 248, 248) !important]1


2


[backcolor=rgb(248, 248, 248) !important]3


4


[backcolor=rgb(248, 248, 248) !important]5


6


[backcolor=rgb(248, 248, 248) !important]7


8


[backcolor=rgb(248, 248, 248) !important]9


10


[backcolor=rgb(248, 248, 248) !important]11


12


[backcolor=rgb(248, 248, 248) !important]13


14


[backcolor=rgb(248, 248, 248) !important]15


16


[backcolor=rgb(248, 248, 248) !important]17


18


[backcolor=rgb(248, 248, 248) !important]19


20


[backcolor=rgb(248, 248, 248) !important]21


22


[backcolor=rgb(248, 248, 248) !important]23


24


[backcolor=rgb(248, 248, 248) !important]25


 

 

[backcolor=rgb(248, 248, 248) !important]// 部分浏览器只支持 vendor-prefixed
// 根据浏览器支持情况设置隐藏属性和可见状态改变事件
[backcolor=rgb(248, 248, 248) !important]var hidden, state, visibilityChange; 
if (typeof document.hidden !== "undefined") {
[backcolor=rgb(248, 248, 248) !important] hidden = "hidden";
visibilityChange = "visibilitychange";
[backcolor=rgb(248, 248, 248) !important] state = "visibilityState";
} else if (typeof document.mozHidden !== "undefined") {
[backcolor=rgb(248, 248, 248) !important] hidden = "mozHidden";
visibilityChange = "mozvisibilitychange";
[backcolor=rgb(248, 248, 248) !important] state = "mozVisibilityState";
} else if (typeof document.msHidden !== "undefined") {
[backcolor=rgb(248, 248, 248) !important] hidden = "msHidden";
visibilityChange = "msvisibilitychange";
[backcolor=rgb(248, 248, 248) !important] state = "msVisibilityState";
} else if (typeof document.webkitHidden !== "undefined") {
[backcolor=rgb(248, 248, 248) !important] hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
[backcolor=rgb(248, 248, 248) !important] state = "webkitVisibilityState";
}

// 添加一个时间来实时改变页面的标题
[backcolor=rgb(248, 248, 248) !important]document.addEventListener(visibilityChange, function(e) {
// Start or stop processing depending on state
[backcolor=rgb(248, 248, 248) !important]}, false);

 

 


  使用教程 在线演示


Supporting visibilityChange in MooTools
河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1443.html转载请标明出处,谢谢合作!
标签:
  • HTML5
  • api
  • 5
  • 特性
  • 重要
  • 许多
  • 新增