Do you know these APIs of html5?

The following is a summary of some HTML5 APIs we have learned before. There are many functions and interfaces in HTML5 that are worth understanding and learning.

Page Visibility API--page Visbility

Full Screen API --full Screen

Get MediaAPI--getUserMedia

Battery API --battery

Resource Preloading API--link Prefetching

Page Visibility API

This API can be used to detect the visibility of the page to the user, that is, return the status change of the page or tab currently being browsed by the user. It takes effect when the browser is minimized and the tap page is switched. (If you need to switch between several webviews in the app, you can use the pageVisibility interface to monitor and process the corresponding events.)

Introduction to page visibility

【document. hidden] This value indicates whether the page is visible, the value is a boolean value

[document.visibilityState] This visibilitystate can have three possible values:

[visible] Indicates that the page is at the front and is not in a minimized state The window

【hidden】 indicates that the page is not the front page or is in a minimized window

【prerender】 indicates that the page content is being re-rendered and the page is invisible to the user

【isibilitychange Event 】*Listen to the event of window visibility change

Related code:

// 设置隐藏属性和可见改变事件的名称，属性需要加浏览器前缀  // since some browsers only offer vendor-prefixed support  var hidden, state, visibilityChange;  if (typeof document.hidden !== "undefined") {  
  hidden = "hidden";  
  visibilityChange = "visibilitychange";  
  state = "visibilityState";  
} else if (typeof document.mozHidden !== "undefined") {  
  hidden = "mozHidden";  
  visibilityChange = "mozvisibilitychange";  
  state = "mozVisibilityState";  
} else if (typeof document.msHidden !== "undefined") {  
  hidden = "msHidden";  
  visibilityChange = "msvisibilitychange";  
  state = "msVisibilityState";  
} else if (typeof document.webkitHidden !== "undefined") {  
  hidden = "webkitHidden";  
  visibilityChange = "webkitvisibilitychange";  
  state = "webkitVisibilityState";  
} // 添加一个标题改变的监听器  document.addEventListener(visibilityChange, function(e) { // 开始或停止状态处理  }, false);

The use of page visibility

How can we use and do what when visibility changes.

We can control those pages that refresh content regularly. When the page is not visible, it will not be refreshed, and when it is visible, it will be refreshed.

We can also pause and continue the audio and video playback according to whether the page is visible.

We can also Based on page visibility, we can calculate more accurate data on how many users of our website stayed on this page, rather than just opening the page and not staying on this page.

Full Screen API Full Screen API

This API allows developers to programmatically run web applications in full screen, making web applications more like native applications. Very simple and useful api.

Introduction to Full Screen

FullScreen API is very simple to use, it has two modes

Launching Fullscreen Mode Launch full screen mode

// 找到适合浏览器的全屏方法  function launchFullScreen(element) {  if(element.requestFullScreen) {  
    element.requestFullScreen();  
  } else if(element.mozRequestFullScreen) {  
    element.mozRequestFullScreen();  
  } else if(element.webkitRequestFullScreen) {  
    element.webkitRequestFullScreen();  
  }  
} // 启动全屏模式  launchFullScreen(document.documentElement); // the whole page  launchFullScreen(document.getElementById("videoElement")); // any individual element

Exit FullScreen Mode Exit full screen mode

// Whack fullscreenfunction exitFullscreen() { if(document.exitFullscreen) { document.exitFullscreen();
  } else if(document.mozCancelFullScreen) { document.mozCancelFullScreen();
  } else if(document.webkitExitFullscreen) { document.webkitExitFullscreen();
  }
} // Cancel fullscreen for browsers that support it! exitFullscreen();

Full Screen related Properties and events

Currently, fullscreen still has compatibility issues, and many browsers that can be used still need to add relevant prefixes to their corresponding properties and events.

【document.fullScreenElement】This attribute indicates the element that starts full screen (such as video)

【document.fullScreenEnabled】This attribute indicates whether it is currently full screen

【fullscreenchange event】Listen for the event of full screen status change

2.2 Full Scrren Related

css There are some summary of the css properties of fullscreen

:-webkit-full-screen,
:-moz-full-screen,
:-ms-fullscreen,
:full-screen {
    /*pre-spec */
   /* properties */
}
:fullscreen { 
    /* spec */
   /* properties */
}
/* deeper elements */:-webkit-full-screen video {
   width: 100%;
   height: 100%;
}
/* styling the backdrop*/::backdrop {
  /* properties */
}
::-ms-backdrop {
  /* properties */
}

FullScreen

The first time I saw this API was when I was reading some mobile novels and mobile comic websites, and found that it has the function of full-screen viewing. The full-screen API may currently have compatibility issues, but I believe it will definitely be a highly used API in the near future

getUserMedia API

This API allows web applications to access the camera and microphone without using plug-ins. The API is in The client is the first to support it, but it is still not available on the PC.

Introduction to getUserMedia API

First read the following html

<!--
    正常正确情况下，使用video等元素，我们是需要在确认客户端是支持该元素时才
    回相应地用js创建这些元素，但通过使用getUserMedia api，
    我们即可在html中直接创建这些元素（而不需要用js来创建）,
--> <video id="video" width="640" height="480" autoplay></video> <button id="snap">Snap Photo</button> <canvas id="canvas" width="640" height="480"></canvas>

related JS code

// 设置事件监听器  window.addEventListener("DOMContentLoaded", function() { // 获取元素  var canvas = document.getElementById("canvas"),  
    context = canvas.getContext("2d"),  
    video = document.getElementById("video"),  
    videoObj = { "video": true },  
    errBack = function(error) { console.log("Video capture error: ", error.code);   
    }; // 设置video监听器  if(navigator.getUserMedia) { // Standard  navigator.getUserMedia(videoObj, function(stream) {  
      video.src = stream;  
      video.play();  
    }, errBack);  
  } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed  navigator.webkitGetUserMedia(videoObj, function(stream){  
      video.src = window.webkitURL.createObjectURL(stream);  
      video.play();  
    }, errBack);  
  }  
}, false);

一旦确定当前浏览器是支持getUserMedia的时， 我们可以同简单的方法将当前我们的video元素的src视频地址赋值给用户手机本地的video，然后通过video的play方法拉起本地video的启动和连接。这样的话我们就可以使用本地的播放器来播放。

电池API（Battery API）

这是一个针对移动设备应用程序的API，主要用于检测设备电池信息。

Battery API 的介绍

var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery; // 电池属性  console.warn("Battery charging: ", battery.charging); 
// 当前电池是否在充电 true  console.warn("Battery level: ", battery.level); 
// 0.58  console.warn("Battery discharging time: ", battery.dischargingTime); 
// 添加事件监听器  battery.addEventListener("chargingchange", function(e) { console.warn("Battery charge change: ", battery.charging);  
}, false);

为什么获取电池信息的api

为什么我们需要用到battery api？现在许多移动端apps都内嵌着web浏览器包装的（不再是完全native的应用）。所以我们需要一个方法去获取系统的信息，app有一些过程是`十分耗电的，然后我们就需要在用户启动时给用户一些警告信息告诉用户当前设备电量较低。这是一个十分重要简单的api.相应在不久的将来会发挥应有的作用。

Link Prefetching【预加载】

Link Prefetching【预加载】

预加载网页内容为浏览者提供一个平滑的浏览体验。这个api我们在业务偶尔也会使用到

什么是link预加载

Link prefetching 是利用浏览器最佳的时间去下载或者预加载一些用户可能将会在不久将来浏览的文档的一种浏览器机制。

<!-- full page --> <link rel="prefetch" href="http://davidwalsh.name/css-enhancements-user-experience" /> 
<!-- just an image --> <link rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" />

什么时候使用link预加载是否在自己的网站使用预加载，可以参考一下几点：

当你做的是一种类似slideshow的网页，需要提前加载近1-3张页面（假设这些页面并不大）

预先加载在网站中许多网页都会用到的图片

预先加载网站搜索的结果的页面

参考链接 http://davidwalsh.name/