5 API mudah dan praktikal dalam HTML5 (Bahagian 2, termasuk skrin penuh, keterlihatan, pengambilan foto, pramuat, status bateri)_html5 kemahiran tutorial

Kelahiran HTML5 telah memberikan kami banyak fungsi dan ciri baharu yang menarik bagi JavaScript dan HTML. Beberapa ciri baharu telah diketahui oleh kami selama bertahun-tahun dan digunakan secara meluas, manakala yang lain digunakan terutamanya dalam teknologi mudah alih termaju, atau sebagai fungsi tambahan dalam aplikasi desktop. Tidak kira betapa hebatnya dan mudah digunakan ciri HTML5 baharu ini, semuanya direka untuk membantu kami membangunkan aplikasi bahagian hadapan penyemak imbas dengan lebih baik. Saya sebelum ini telah berkongsi dengan anda artikel tentang 5 ciri HTML5 baharu yang anda tidak tahu tentangnya. Saya berharap beberapa teknologi yang dinyatakan di dalamnya dapat membantu meningkatkan aplikasi web anda. Di sini saya juga ingin berkongsi dengan anda beberapa ciri HTML5 baharu yang tidak ramai orang tahu tentangnya. Saya harap ia boleh memberi manfaat kepada anda!

1. Antara muka API skrin penuh

Antara muka API skrin penuh yang berkuasa membolehkan pengaturcara melancarkan penyemak imbas ke dalam mod skrin penuh melalui pengaturcaraan dan meminta kebenaran pengguna:

Salin kod

Kodnya adalah seperti berikut:

// Cari kaedah yang betul, panggil elemen yang betul
pelancaran fungsiSkrin Penuh(elemen) {
jika(elemen. requestFullScreen) {
element.requestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) { }
}

// Lancarkan skrin penuh untuk pelayar yang menyokongnya!
launchFullScreen(document.documentElement); // seluruh halaman

launchFullScreen(document.getElementById("videoElement")); 🎜>
Sebarang elemen halaman boleh menjadi sasaran output skrin penuh HTML5 malah menyediakan kelas pseudo CSS untuk membolehkan pengaturcara mengawal gaya elemen skrin penuh apabila penyemak imbas adalah skrin penuh. API skrin penuh ini amat berguna apabila anda membangunkan permainan terutamanya penembak seperti BananaBread.

2. Antara muka API keterlihatan halaman

Antara muka API keterlihatan halaman menyediakan acara pendengaran ini boleh memberitahu pengaturcara sama ada halaman semasa adalah tab/tetingkap yang diaktifkan dalam penyemak imbas dan sama ada halaman yang sedang ditonton oleh pengguna untuk menukar halaman dan berhenti melihat halaman/tetingkap ini:

Salin kod

Kodnya adalah seperti berikut:

// Disesuaikan sedikit daripada Sam Dutton
// Tetapkan nama sifat tersembunyi dan peristiwa perubahan keterlihatan
// kerana sesetengah penyemak imbas hanya menawarkan sokongan awalan vendor
var tersembunyi, keadaan, keterlihatanTukar ;
if (typeof document.hidden !== "undefined") {
hidden = "hidden";
visibilityChange = "visibilitychange";
state = "visibilityState";
} else if (typeof document.mozHidden !== "undefined") {
hidden = "mozHidden";
visibilityChange = "mozvisibilitychange";
state = "mozVisibilityState";
} jika tidak (jenis dokumen .msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
state = "msVisibilityState";
} jika tidak (typeof document.webkitHidden != = "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
state = "webkitVisibilityState";
}

// Tambah pendengar yang sentiasa menukar tajuk
document.addEventListener(visibilityChange, function(e) {
// Mulakan atau hentikan pemprosesan bergantung pada keadaan

}, palsu);

Dengan menggunakan API ini secara fleksibel, pengaturcara boleh menjeda beberapa tugas berat (seperti AJAX atau animasi) apabila pengguna tidak menonton halaman ini.

3. API antara muka getUserMedia

getUserMedia API ialah antara muka yang sangat menarik! Menggunakan API ini dan menambah tag

Salin kod

Kod tersebut adalah seperti berikut:

// Letakkan pendengar acara pada tempatnya
window.addEventListener("DOMContentLoaded", function() {
// Dapatkan elemen, buat tetapan, dsb.
var canvas = document.getElementById ("kanvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(ralat) {
console.log("Ralat tangkapan video: ", error.code);

// Letakkan pendengar video pada tempatnya
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 = tetingkap. webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
}, false);

你一定要在以后的应用中中试试这个HTML5新功能，通过浏览器进行各种各样的交互的技术已经越来越流四、电池接口API

电池接口API很显然是专门为手机里的浏览器应用设计的，它提供了读取量量的电取里量电状态的功能：

复制代码代码如下:

// Dapatkan bateri!

var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery;

// Beberapa sifat bateri yang berguna
console.warn("Battery charging: ", battery.charging); // true
console.warn("Tahap bateri: ", level.bateri); // 0.58
console.warn("Masa nyahcas bateri: ", battery.dischargingTime);

// Tambah beberapa pendengar acara
battery.addEventListener("chargingchange", function(e) {
console.warn("Battery charge change: ", battery.charging);
} , false);

这些HTML5提供的电池接口API能直接将电池电量状态告诉web应用，而不用直接将电池电量状态告诉web应用，而不矀最告诉或第三方应用。虽然不是一个特别大的功能，但绝对是一个有用的接口。

五、页面预加载(Pautan prefetch)API

页面预加载(Pautan prefetch)API功能能够让浏览器在后台静悄悄的预先加载/读取一麛前页面，给用户一个顺滑的使用体验：

复制代码代码如下:

就是这5个你需要知道和尝试的新HTML5 API。请注意，这些新功能在几年之内在几年之内就起说接受这些API，你就能更好的创造出最前沿技术的Web应用。花几分钟试试这些新功能，看看你能用它们实现什么样>的！