Kennen Sie diese APIs von HTML5?

Das Folgende ist eine Zusammenfassung einiger HTML5-APIs, die wir zuvor gelernt haben. Es gibt viele Funktionen und Schnittstellen in HTML5, die es wert sind, verstanden und erlernt zu werden.

Seitensichtbarkeits-API --Seitensichtbarkeit

Vollbild-API --vollbild

Get MediaAPI --getUserMedia

Batterie-API --battery

API zum Vorladen von Ressourcen – Link-Prefetching

Seitensichtbarkeit Seitensichtbarkeits-API

Diese API kann verwendet werden, um die Sichtbarkeit der Seite für den Benutzer zu erkennen, d. h. die Seite zurückzugeben aktuell vom Benutzer durchsucht oder die Statusänderung des Label-Tipps. Es wird wirksam, wenn der Browser minimiert und die Tap-Seite umgeschaltet wird. (Wenn Sie zwischen mehreren Webansichten in der App wechseln müssen, können Sie die entsprechenden Ereignisse über die pageVisibility-Schnittstelle überwachen und verarbeiten.)

Einführung zur Seitensichtbarkeit

[document.hidden] Dieser Wert gibt an, ob die Seite sichtbar ist, der Wert ist ein boolescher Wert

[document.visibilityState] Dieser Sichtbarkeitsstatus kann drei mögliche Werte haben:

[sichtbar] Zeigt an, dass die Seite im Vordergrund ist und sich nicht in einem minimierten Fenster befindet

【versteckt] Zeigt an, dass die Seite nicht im Vordergrund ist oder sich in einem minimierten Fenster befindet

[prerender] Zeigt an, dass der Inhalt der Seite neu gerendert wird und die Seite für den Benutzer unsichtbar ist

[isibilitychange Event]*Ein Ereignis, das auf Änderungen der Fenstersichtbarkeit wartet

Zugehöriger 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);

Die Verwendung der Seitensichtbarkeit

Wie können wir damit die Sichtbarkeit ändern?

Wir können die Seiten steuern, deren Inhalt regelmäßig aktualisiert wird. Wenn die Seite nicht sichtbar ist, wird sie nicht aktualisiert, und wenn sie sichtbar ist, wird sie aktualisiert.

Wir können auch pausieren und die Audiowiedergabe basierend darauf fortsetzen, ob die Seite sichtbar ist oder nicht.

Wir können auch genauere Daten über die Benutzer unserer Website, die auf dieser Seite bleiben, basierend auf der Sichtbarkeit der Seite berechnen, anstatt nur Öffnen der Seite, ohne auf dieser Seite zu bleiben.

Vollbild-APIVollbild-API

Mit dieser API können Entwickler Webanwendungen programmgesteuert im Vollbildmodus ausführen, wodurch Webanwendungen eher nativen Anwendungen ähneln. Eine sehr einfache und nützliche API.

Einführung in den Vollbildmodus

Die API von FullScreen ist sehr einfach zu verwenden und verfügt über zwei Modi

Starten des Vollbildmodus

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

Vollbildmodus beenden

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

Verwandte Eigenschaften und Ereignisse des Vollbildmodus

Derzeit weist der Vollbildmodus immer noch Kompatibilitätsprobleme auf, und viele Browser, die verwendet werden können, müssen noch auf die entsprechenden Eigenschaften und Ereignisse zugreifen werden mit entsprechenden Präfixen hinzugefügt.

[document.fullScreenElement] Dieses Attribut gibt das Element an, das im Vollbildmodus startet (z. B. Video)

[document.fullScreenEnabled] Dieses Attribut gibt an, ob es sich derzeit im Vollbildmodus befindet

[fullscreenchange event] Abhören der Ereignisse der Statusänderung im Vollbildmodus

2.2 Vollbildbezogenes Bild

CSS Es gibt einige CSS-Eigenschaften für den Vollbildmodus

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

Zusammenfassung von Vollbild

Nein. Das erste Mal sah ich diese API, als ich einige mobile Romane und mobile Comic-Websites las und feststellte, dass sie über eine Vollbild-Anzeigefunktion verfügt. Die Vollbild-API kann derzeit Kompatibilitätsprobleme haben, aber ich glaube, dass sie in naher Zukunft definitiv eine häufig genutzte API sein wird

getUserMedia API

Diese API ermöglicht Webanwendungen den Zugriff auf die Kamera und Ohne Verwendung von Plug-Ins wurde diese API zunächst auf dem Client unterstützt, ist aber auf dem PC immer noch nicht verfügbar.

Einführung in die getUserMedia-API

Lesen Sie zuerst den folgenden HTML-Code

<!--
    正常正确情况下，使用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>

Zugehöriger 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/