html5의 이러한 API를 알고 계십니까?

다음은 이전에 배운 일부 HTML5 API에 대한 요약입니다. HTML5에는 이해하고 배울 가치가 있는 많은 기능과 인터페이스가 있습니다.

페이지 가시성 API --페이지 가시성

전체 화면 API --전체 화면

Get MediaAPI --getUserMedia

배터리 API --battery

리소스 사전 로드 API-링크 사전 가져오기

페이지 가시성 Page Visibility API

이 API는 사용자에게 페이지의 가시성을 감지하는 데 사용할 수 있습니다. 즉, 페이지를 반환합니다. 현재 사용자가 탐색하고 있는 라벨 탭의 상태 변경. 브라우저가 최소화되고 탭 페이지가 전환될 때 적용됩니다. (앱에서 여러 웹뷰 간에 전환해야 하는 경우 pageVisibility 인터페이스를 사용하여 해당 이벤트를 모니터링하고 처리할 수 있습니다.)

소개 페이지 가시성

[document.hidden] 이 값은 페이지가 표시되는지 여부를 나타내며 값은 부울 값입니다.

[document.visibilityState] 이 가시성 상태는 세 가지 가능한 값을 가질 수 있습니다.

[visible ] 페이지가 맨 앞에 있고 최소화된 창에 있지 않음을 나타냅니다.

[hidden] 페이지가 맨 앞에 있지 않거나 최소화된 창에 있음을 나타냅니다.

[prerender] 페이지의 콘텐츠가 다시 렌더링되고 페이지가 사용자에게 보이지 않음을 나타냅니다.

[isibilitychange 이벤트]*창 가시성의 변경을 수신하는 이벤트

관련 코드:

// 设置隐藏属性和可见改变事件的名称，属性需要加浏览器前缀  // 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);

페이지 가시성 사용

이를 어떻게 사용하여 가시성을 변경할 수 있나요?

페이지가 표시되지 않으면 새로 고쳐지지 않고, 표시되면 새로 고쳐지는 페이지를 제어할 수 있습니다.

또한 일시중지할 수 있습니다. 페이지 표시 여부에 따라 오디오를 계속 재생합니다

단순한 내용이 아닌 페이지 표시 여부를 기준으로 이 페이지에 머무르는 웹사이트 사용자에 대한 보다 정확한 데이터를 계산할 수도 있습니다. 이 페이지에 머무르지 않고 페이지를 엽니다.

전체 화면 API전체 화면 API

이 API를 사용하면 개발자는 프로그래밍 방식으로 웹 애플리케이션을 전체 화면에서 실행하여 웹 애플리케이션을 기본 애플리케이션과 비슷하게 만들 수 있습니다. 매우 간단하고 유용한 API입니다.

전체 화면 소개

FullScreen의 API는 사용이 매우 간단하며 두 가지 모드가 있습니다

전체 화면 모드 실행

// 找到适合浏览器的全屏方法  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

전체 화면 모드 종료

// 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();

전체 화면 관련 속성 및 이벤트

현재 전체 화면에는 여전히 호환성 문제가 있으며 사용할 수 있는 많은 브라우저는 여전히 해당 속성 및 이벤트가 필요합니다. 관련 접두사가 추가됩니다.

[document.fullScreenElement] 이 속성은 전체 화면(예: 비디오)을 시작하는 요소를 나타냅니다.

[document.fullScreenEnabled] 이 속성은 현재 전체 화면인지 여부를 나타냅니다.

[fullscreenchange 이벤트] 전체 화면 상태가 변경되는 이벤트 듣기

2.2 전체 화면 관련

css 전체 화면에 대한 CSS 속성이 있습니다

:-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 */
}

전체 화면 요약

아니요. 이 API를 처음 본 것은 모바일 소설이나 모바일 만화 사이트를 보다가 전체 화면 보기 기능이 있다는 것을 알았을 때였습니다. 전체 화면 API는 현재 호환성 문제가 있을 수 있지만 가까운 미래에 확실히 많이 사용될 API가 될 것이라고 믿습니다.

getUserMedia API

이 API를 사용하면 웹 애플리케이션에서 카메라에 액세스하고 마이크 플러그인을 사용하지 않고 이 API는 클라이언트에서 처음 지원되었지만 여전히 PC에서는 사용할 수 없습니다.

getUserMedia API 소개

아래 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>

관련 JS 코드

// 设置事件监听器  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/