HTML5 menyediakan beberapa JavaScript dan HTML API yang sangat berkuasa untuk membantu pembangun membina aplikasi desktop dan mudah alih yang menakjubkan. Artikel ini akan memperkenalkan 5 API baharu, dengan harapan dapat membantu kerja pembangunan anda.
1. API skrin penuh
API ini membolehkan pembangun menjalankan aplikasi web secara pengaturcaraan dalam skrin penuh, menjadikan aplikasi web lebih seperti aplikasi asli.
// Cari penuh kaedah skrin sesuai untuk penyemak imbas
pelancaran fungsiFullScreen(elemen) {
if(element.requestFullScreen) {
elemen.requestFullScreen();
} else if(element.mozRequestFullScreen) {
.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
}
// Lancarkan mod skrin penuh
launch(docullFull documentElement); // seluruh halaman
launchFullScreen(document.getElementById("videoElement")); // mana-mana elemen individu
2. API Keterlihatan Halaman (API Keterlihatan Halaman)
API ini boleh digunakan untuk mengesan keterlihatan halaman kepada pengguna, iaitu mengembalikan perubahan status halaman atau tab yang sedang dilayari oleh pengguna.
// Tetapkan atribut tersembunyi dan peristiwa perubahan yang boleh dilihat Nama dan atribut perlu ditambah dengan awalan penyemak imbas
// memandangkan sesetengah penyemak imbas hanya menawarkan sokongan awalan vendor
var hidden, state, visibilityChange
if (typeof document.hidden != = "undefined") {
hidden = "hidden";
visibilityChange = "visibilitychange";
state = "visibilityState"; ) {
tersembunyi = "mozHidden";
visibilityChange = "mozvisibilitychange";
state = "mozVisibilityState"; > tersembunyi = "msHidden" ;
visibilityChange = "msvisibilitychange";
state = "msVisibilityState"; webkitHidden";
visibilityChange = "webkitvisibilitychange";
state = "webkitVisibilityState";
}
// Tambah pendengar untuk perubahan tajuk
document.addEventListener(visibilityChange, function(e) {
// Mulakan atau hentikan pemprosesan status
}, palsu);
3. getUserMedia API
API ini membenarkan aplikasi web mengakses kamera dan mikrofon tanpa menggunakan pemalam.
Salin kod
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);
};
// Tetapkan pendengar video
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(strim) {
video . src = stream;
video.play();
}, errBack
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function strim ){
video.src = window.webkitURL.createObjectURL(strim
video.play();
}, errBack }
}, palsu);
4. API Bateri
Ini ialah API untuk aplikasi peranti mudah alih, digunakan terutamanya untuk mengesan maklumat bateri peranti.
Salin kod