摘要:毫无疑问,HTML5已经成为当今最流行的一门技术,尤其是Web开发者们对HTML5的兴趣是日趋渐浓。HTML5的许多功能也都能在现代浏览器中得以实现。然而,作为开发者,除了关注HTML5的功能和开发工具外,你有对其API留意过吗?本文将为你提供5个非常实用的API,绝对让你收获满满!
HTML5革命给Web开发者们带来许多超棒的JavaScript和HTML APIs,有些API已逐渐成为他们的好帮手。最近,我又接触到了5个非常实用的HTML5 API,在此和大家分享,希望这些API能帮助你开发出更好的Web Apps。
全屏API,顾名思义,全屏API可以让开发人员进入到浏览器的全屏模式,用户在使用的时候可以随意启动和取消该模式。这个API特别适合游戏开发者:
- //Findtherightmethod,calloncorrectelement
- functionlaunchFullScreen(element){
- if(element.requestFullScreen){
- element.requestFullScreen();
- }elseif(element.mozRequestFullScreen){
- element.mozRequestFullScreen();
- }elseif(element.webkitRequestFullScreen){
- element.webkitRequestFullScreen();
- }
- }
- //Launchfullscreenforbrowsersthatsupportit!
- launchFullScreen(document.documentElement);//thewholepage
- launchFullScreen(document.getElementById("videoElement"));//anyindividualelement
该API给开发者提供了一个监听事件,可以告诉开发者当前用户关注的页面TAB以及目前在窗口上所打开的页面状态。
- //AdaptedslightlyfromSamDutton
- //Setnameofhiddenpropertyandvisibilitychangeevent
- //sincesomebrowsersonlyoffervendor-prefixedsupport
- varhidden,state,visibilityChange;
- if(typeofdocument.hidden!=="undefined"){
- hidden="hidden";
- visibilityChange="visibilitychange";
- state="visibilityState";
- }elseif(typeofdocument.mozHidden!=="undefined"){
- hidden="mozHidden";
- visibilityChange="mozvisibilitychange";
- state="mozVisibilityState";
- }elseif(typeofdocument.msHidden!=="undefined"){
- hidden="msHidden";
- visibilityChange="msvisibilitychange";
- state="msVisibilityState";
- }elseif(typeofdocument.webkitHidden!=="undefined"){
- hidden="webkitHidden";
- visibilityChange="webkitvisibilitychange";
- state="webkitVisibilityState";
这是个非常有趣的API,使用该API可以访问多媒体设备,比如笔记本的摄像头(要有用户权限)。利用该API与<video>和canvas元素,可以在浏览器里面捕获许多漂亮的图片。
- //Puteventlistenersintoplace
- window.addEventListener("DOMContentLoaded",function(){
- //Grabelements,createsettings,etc.
- varcanvas=document.getElementById("canvas"),
- context=canvas.getContext("2d"),
- video=document.getElementById("video"),
- videoObj={"video":true},
- errBack=function(error){
- console.log("Videocaptureerror:",error.code);
- };
- //Putvideolistenersintoplace
- if(navigator.getUserMedia){//Standard
- navigator.getUserMedia(videoObj,function(stream){
- video.src=stream;
- video.play();
- },errBack);
- }elseif(navigator.webkitGetUserMedia){//WebKit-prefixed
- navigator.webkitGetUserMedia(videoObj,function(stream){
- video.src=window.webkitURL.createObjectURL(stream);
- video.play();
- },errBack);
- }
- },false);
显然,这是一款用在移动设备上的API,检查电池电量和状态。
- //Getthebattery!
- varbattery=navigator.battery||navigator.webkitBattery||navigator.mozBattery;
- //Afewusefulbatteryproperties
- console.warn("Batterycharging:",battery.charging);//true
- console.warn("Batterylevel:",battery.level);//0.58
- console.warn("Batterydischargingtime:",battery.dischargingTime);
- //Addafeweventlisteners
- battery.addEventListener("chargingchange",function(e){
- console.warn("Batterychargechange:",battery.charging);
- },false);
点击阅读教程
Link Prefetching提供了链接预取功能,可以让开发者更清晰流畅的预加载网站内容,提高用户体验。
- <!--fullpage-->
- <linkrel="prefetch"href="http://davidwalsh.name/css-enhancements-user-experience"/>
- <!--justanimage-->
- <linkrel="prefetch"href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png"/>
点击阅读教程
这是5个值得Web开发者们细心研究的API,在未来会被广泛运用。利用这些API可以帮你构建一些世界级的企业应用,不妨把它们组合起来使用看看!