HTML5中5个简单实用的API（第二篇，含全屏、可见性、拍照、预加载、电池状态）

HTML5作为现代Web开发的基础，提供了众多实用的API接口，为Web应用的开发提供了更多的便利和补充。本篇攻略将介绍HTML5中5个简单实用的API，包括全屏、可见性、拍照、预加载和电池状态。

一、全屏API

全屏API可以让网页全屏展示，提升用户的使用体验。目前已经在所有主流浏览器中被广泛支持。

1. 进入全屏模式

// 获取全屏元素
const elem = document.documentElement;

// 进入全屏模式
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
}

2. 退出全屏模式

// 退出全屏模式
if (document.exitFullscreen) {
  document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
  document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
  document.msExitFullscreen();
}

二、可见性API

可见性API可以判断当前页面是否被用户可见，比如用户是否在当前页面上活动。这个API在处理一些页面单元动画效果、页面切换等方面非常有用。

1. 判断当前页面是否被用户可见

// 判断页面是否被用户可见
document.addEventListener("visibilitychange", function() {
  console.log(document.visibilityState);
});

在页面不可见的时候output将会是 "hidden" ，否则是 "visible" 。

2. 强制让页面始终保持活跃状态

// 强制让页面始终保持活跃状态
let hidden, visibilityChange;
if (typeof document.hidden !== "undefined") {
  hidden = "hidden";
  visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
  hidden = "msHidden";
  visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
  hidden = "webkitHidden";
  visibilityChange = "webkitvisibilitychange";
}

if (typeof document.addEventListener !== "undefined" && hidden) {
  document.addEventListener(visibilityChange, function() {
    if (document[hidden]) {
      document.title = "Sorry, you left the page!";
    } else {
      document.title = "Welcome back!";
    }
  });
}

三、拍照API

HTML5新提供的拍照API可以让网页在不调用手机自带App的情况下，直接调用摄像头进行拍照操作，非常的方便。

1. 获取摄像头

navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) {
  const video = document.querySelector('video');
  video.srcObject = mediaStream;
  video.onloadedmetadata = function(e) {
    video.play();
  };
})
.catch(function(err) { console.log(err.name + ": " + err.message); });

2. 拍照

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');

document.getElementById('capture').addEventListener('click', function() {
  context.drawImage(video, 0, 0, 640, 480);
});

四、预加载API

预加载API可以让图片和其他文件在页面加载的同时提前加载，让用户体验到更快的访问速度。

1. 预加载图片

<link rel="preload" href="example.jpg" as="image">

2. 预加载音频

<link rel="preload" href="example.mp3" as="audio">

3. 预加载字体

<link rel="preload" href="example.ttf" as="font" type="font/ttf">

五、电池状态API

电池状态API提供了查询电池电量的功能，非常的实用。

1. 获取电池状态

navigator.getBattery().then(function(battery) {
  console.log('Battery charging:', battery.charging);
  console.log('Battery level:', battery.level);
  console.log('Battery charging time:', battery.chargingTime);
  console.log('Battery discharging time:', battery.dischargingTime);
  battery.addEventListener('chargingchange', function() {
    console.log('Battery charging:', battery.charging);
  });
  battery.addEventListener('levelchange', function() {
    console.log('Battery level:', battery.level);
  });
  battery.addEventListener('chargingtimechange', function() {
    console.log('Battery charging time:', battery.chargingTime);
  });
  battery.addEventListener('dischargingtimechange', function() {
    console.log('Battery discharging time:', battery.dischargingTime);
  });
});

2. 监听电池电量的变化

navigator.getBattery().then(function(battery) {
  function updateBatteryStatus() {
    console.log('Battery charging:', battery.charging);
    console.log('Battery level:', battery.level);
    console.log('Battery charging time:', battery.chargingTime);
    console.log('Battery discharging time:', battery.dischargingTime);
  }
  updateBatteryStatus();
  battery.addEventListener('chargingchange', function() {
    updateBatteryStatus();
  });
  battery.addEventListener('levelchange', function() {
    updateBatteryStatus();
  });
  battery.addEventListener('chargingtimechange', function() {
    updateBatteryStatus();
  });
  battery.addEventListener('dischargingtimechange', function() {
    updateBatteryStatus();
  });
});

通过以上5个API的介绍以及对应的示例，我们可以看到HTML5所提供的一些实用接口能够非常方便地为Web应用带来更多的便利和体验。