HTML5 の 5 つのシンプルで実用的な API (パート 2、全画面表示、可視性、写真撮影、プリロード、バッテリーステータスなど)

HTML5 の 5 つのシンプルで実用的な API (パート 2、全画面表示、可視性、写真撮影、プリロード、バッテリーステータスなど)_html5 チュートリアルスキル

WBOY

リリース： 2016-05-16 15:48:04

オリジナル

1387 人が閲覧しました

HTML5 の誕生により、JavaScript と HTML の多くの素晴らしい新機能が私たちに提供されました。新しい機能の中には、何年も前から知られており広く使用されているものもありますが、その他の機能は主に最先端のモバイルテクノロジで使用されたり、デスクトップアプリケーションの補助機能として使用されたりしています。これらの新しい HTML5 機能がどれほど強力で使いやすいとしても、それらはすべて、ブラウザーフロントエンドアプリケーションの開発を改善するために設計されています。以前、皆さんが知らない 5 つの HTML5 の新機能に関する記事を紹介しましたが、その中で言及されているテクノロジーの一部が Web アプリケーションの改善に役立つことを願っています。ここでは、あまり知られていない HTML5 の新機能もいくつか紹介したいと思います。お役に立てれば幸いです。

1. フルスクリーン API インターフェース

強力な全画面 API インターフェイスにより、プログラマはプログラミングを通じてブラウザを全画面モードで起動し、ユーザーの許可を要求できます:

コードをコピー

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

// 正しいメソッドを見つけて、正しい要素を呼び出します
function launchFullScreen(element) {
if(element. requestFullScreen) {
element.requestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
要素。 webkitRequestFullScreen();
}
}

// サポートしているブラウザでは全画面表示を起動します!
launchFullScreen(document.documentElement); // ページ全体
launchFullScreen(document.getElementById("videoElement")) // 個々の要素

任意のページ要素を全画面出力のターゲットにすることができます。HTML5 では、ブラウザーが全画面表示のときにプログラマが全画面要素のスタイルを制御できるようにする CSS 疑似クラスも提供しています。このフルスクリーン API は、ゲーム、特に BananaBread のようなシューティングゲームを開発する場合に特に便利です。

2. ページ可視性 API インターフェース

ページ可視性 API インターフェイスは、リスニングイベントを提供します。このイベントは、現在のページがブラウザーでアクティブ化されたタブ/ウィンドウであるかどうか、およびユーザーが見ているページであるかどうかをプログラムに伝えることができます。ページを切り替えてこのページ/ウィンドウの表示を停止するには:

コードをコピーします

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

// Sam Dutton を少し改変しました
// 非表示プロパティと可視性変更イベントの名前を設定します
// 一部のブラウザーはベンダープレフィックス付きのサポートのみを提供するため
var hidden, state, VisibilityChange ;
if (typeof document.hidden !== "未定義") {
hidden = "hidden";
VisibilityChange = "visibilitychange";
state = "visibilityState";
} else if (typeof document.mozHidden !== "未定義") {
hidden = "mozHidden";
VisibilityChange = "mozvisibilitychange";
state = "mozVisibilityState";
} else if (typeof document .msHidden !== "未定義") {
hidden = "msHidden";
VisibilityChange = "msvisibilitychange";
state = "msVisibilityState";
} else if (typeof document.webkitHidden != = "未定義") {
hidden = "webkitHidden";
VisibilityChange = "webkitvisibilitychange";
state = "webkitVisibilityState";
}

// タイトルを常に変更するリスナーを追加します
document.addEventListener(visibilityChange, function(e) {
// 状態に応じて処理を開始または停止します

}, false);

この API を柔軟に使用することで、プログラマは、ユーザーがこのページを見ていないときに、一部の重いタスク (AJAX やアニメーションなど) を一時停止できます。

3. getUserMedia インターフェース API

getUserMedia API は非常に興味深いインターフェイスです。この API を使用して

コードをコピーします

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

// イベントリスナーを配置します
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;
video.play( );
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit プレフィックス付き
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window. webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
}, false);

你一定要以降の应用中この HTML5 の新機能は、浏览器を介してさまざまな対話を実行できる技術です。

四、電池インターフェースAPI

電気池インターフェース API は、机里の充電器アプリケーション用の設計であり、機器里の電池の量と充電状態を監視する機能を提供します:

复制代

代码如下:

// バッテリーを入手してください!
var Battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery;

// いくつかの便利なバッテリープロパティ
console.warn("バッテリー充電: ", Battery.charging); // true
console.warn("バッテリー残量: ", Battery.level); // 0.58
console.warn("バッテリーの放電時間: ", Battery.dischargingTime);

// いくつかのイベントリスナーを追加します
battery.addEventListener("chargingchange", function(e) {
console.warn("バッテリー充電変化: ", Battery.charging);
} 、 false);

これらの HTML5 が提供する電池インターフェイス API は、電池センサーやサードパーティの使用を必要とせずに、電池の量の状態を Web アプリケーションに直接送信できます。便利なインターフェイス。

五、页面预追加(リンクプリフェッチ)API

页面追加(リンクプリフェッチ)API 機能可能後台静悄の一部の页面または资源を現在の面に先取りダウンロード/读取し、使用する使用体:

复制代

代码如下:

は、知識と経験が必要な 5 つの新しい HTML5 API です。これらの新機能は年内に流行する可能性があるため、これらの API を早く受け入れれば受け入れるほど、より優れたデザインを作成できるようになることに注意してください。これらの新機能を試してみると、どのような効果が得られるかがわかります。