5 つの強力な HTML5 API 関数の推奨事項_html5 チュートリアル スキル

HTML5 は、開発者が素晴らしいデスクトップおよびモバイル アプリケーションを構築できるよう、非常に強力な JavaScript API と HTML API を提供します。この記事では、開発作業に役立つことを願って、5 つの新しい API を紹介します。

1. フルスクリーン API

この API を使用すると、開発者はプログラムによって Web アプリケーションを全画面で実行できるようになり、Web アプリケーションをネイティブ アプリケーションに近づけることができます。

コードをコピーします

コードは次のとおりです:

// 完全なコードを検索しますブラウザに適した screen メソッド
function launchFullScreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen()
} else if(element.mozRequestFullScreen) {
要素.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
}
// 全画面モードを起動
launchFullScreen(document. documentElement); // ページ全体
launchFullScreen(document.getElementById("videoElement")); // 個々の要素

2. Page Visibility API (ページ可視性 API)

この API は、ユーザーに対するページの可視性を検出するために使用できます。つまり、ユーザーが現在閲覧しているページまたはタブのステータス変化を返します。

コードをコピー

コードは次のとおりです:

// 隠し属性を設定し、表示される変更イベント 一部のブラウザはベンダー プレフィックス付きのサポートのみを提供するため、名前と属性はブラウザ プレフィックス
// で追加する必要があります。 = "未定義") {
非表示 = "非定義";
可視性変更 = "可視性変更";
状態 = "可視状態"
} else if (typeof document.mozHidden !== "未定義" ) {
hidden = "mozHidden";
VisibilityChange = "mozVisibilityChange";
state = "mozVisibilityState"; else if (typeof document.msHidden !== "unknown") {
非表示 = "msHidden" ;
可視性変更 = "msvisibilitychange";
状態 = "msVisibilityState";
} else if (typeof document.webkitHidden !== "未定義") {
非表示 = " webkitHidden";
VisibilityChange = "webkitvisibilitychange";
state = "webkitVisibilityState";
}
// タイトル変更用のリスナーを追加します
document.addEventListener(visibilityChange, function(e) {
// ステータス処理の開始または停止
}, false);

3. getUserMedia API

この API を使用すると、Web アプリケーションはプラグインを使用せずにカメラとマイクにアクセスできます。

コードをコピー

コードは次のとおりです:

// イベント リスナーを設定します

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("ビデオ キャプチャ エラー: " , error .code);
};
// ビデオリスナーを設定します
if(navigator.getUserMedia) { // 標準
navigator.getUserMedia(videoObj, function(stream) {
video . src = stream;
},
} else if(navigator.webkitGetUserMedia) { // WebKit プレフィックス付き
navigator.webkitGetUserMedia(ストリーム ){
video.src = window.webkitURL.createObjectURL(stream);
video.play()
},
}, false); >



4. Battery API

これはモバイル デバイス アプリケーション用の API であり、主にデバイスのバッテリー情報を検出するために使用されます。

コードをコピーします

コードは次のとおりです:

var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery;
// Battery properties
console.warn("Battery charging: ", battery.charging); // true
console.warn("Battery level: ", battery.level); // 0.58
console.warn("Battery discharging time: ", battery.dischargingTime);
// Add event listener
battery.addEventListener("chargingchange", function(e) {
console.warn("Battery charge change: ", battery.charging);
}, false);

5. Link Prefetching

Preload web page content to provide viewers with a smooth browsing experience.

Copy code

The code is as follows:

The above are these 5 new APIs. Do you guys understand them? If you have any questions, please leave a message. Let’s discuss together and make progress together.