Pengenalan terperinci kepada kemahiran tutorial HTML5 Skrin Penuh API_html5

Dalam lebih banyak aplikasi web sebenar, JavaScript menjadi semakin berkuasa.

API Skrin Penuh ialah API JavaScript baharu, Skrin Penuh yang ringkas dan berkuasa membolehkan kami meminta paparan skrin penuh daripada pengguna secara pemrograman, dan jika interaksi selesai, kami boleh keluar dari keadaan skrin penuh pada bila-bila masa.

Demonstrasi Dalam Talian: Contoh API Skrin Penuh

(Dalam Demo ini, anda boleh Lancarkan, Sembunyikan dan Buang untuk memaparkan sifat yang berkaitan, dan anda boleh melihat maklumat log melalui konsol krom.)

Dayakan mod skrin penuh

Permintaan API skrin penuhKaedah skrin penuh masih menggunakan nama kaedah dengan awalan dalam sesetengah penyemak imbas lama, jadi pengesanan dan pertimbangan mungkin diperlukan:
(Dengan awalan, ini bermakna setiap kernel penyemak imbas tidak universal.)

Salin kod

Kod adalah seperti berikut:

// Cari yang disokong kaedah dan gunakan elemen yang memerlukan Panggil skrin penuh
function launchFullScreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen(); ;
}
}


// Lancarkan skrin penuh dalam pelayar yang menyokong skrin penuh
// Seluruh halaman
launchFullScreen(document.documentElement); >// Unsur
launchFullScreen( document.getElementById("videoElement"));

Ambil elemen DOM yang perlu dipaparkan dalam skrin penuh sebagai parameter Memanggil kaedah ini boleh menjadikan tetingkap memasuki keadaan skrin penuh Kadangkala persetujuan pengguna mungkin diperlukan (pelayar itu sendiri berinteraksi dengan pengguna). pengguna menolak, pelbagai ketidaklengkapan mungkin berlaku.

Jika pengguna bersetuju untuk menggunakan skrin penuh, bar alat dan komponen penyemak imbas lain akan disembunyikan, menjadikan lebar dan tinggi bingkai dokumen menjangkau seluruh skrin.

Keluar daripada mod skrin penuh

Gunakan kaedah exitFullscreen untuk keluar dari penyemak imbas dari skrin penuh dan kembali ke reka letak asal Kaedah ini juga menyokong kaedah awalan pada beberapa penyemak imbas lama. > Salin kod

Kodnya adalah seperti berikut:

// Keluar dari skrin penuh function exitFullscreen() { if(document.exitFullscreen) { dokumen. exitFullscreen(); } else if(document.mozExitFullScreen) {

document.mozExitFullScreen();

} else if(document.webkitExitFullscreen) {

dokumen. ;
}
}


// Panggil keluar kaedah skrin penuh (); keluar daripada skrin penuh (); dipanggil melalui objek dokumen - bukan Gunakan elemen DOM biasa.


Sifat dan acara skrin penuh


Berita buruknya ialah setakat ini, acara dan kaedah skrin penuh masih diberi awalan. Berita baiknya ialah tidak lama lagi semua penyemak imbas utama akan menyokongnya.

1.document.fullscreenElement: Elemen pada masa ini dalam keadaan skrin penuh.
2.document.fullscreenEnabled: Tandakan sama ada skrin penuh tersedia pada masa ini.

Apabila memasuki/keluar daripada mod skrin penuh, peristiwa pertukaran skrin penuh akan dicetuskan:

Salin kod

Kodnya adalah seperti berikut:

var fullscreenElement =

document.fullscreenEnabled
||. document.mozFullscreenElement

||. document.webkitFullscreenElement;

var fullscreenEnabled = document.fullscreenEnabled ||document.mozFullscreenEnabled; 🎜>Apabila memulakan kaedah skrin penuh, anda boleh mengesan acara mana yang perlu dipantau.

CSS skrin penuh


Pelayar menyediakan beberapa peraturan kawalan CSS skrin penuh yang berguna:





Salin kod

Kodnya adalah seperti berikut:

/* html */

:-webkit-skrin penuh {

/* properties */
}
:-moz-fullscreen {

/* sifat * /

} :skrin penuh { /* sifat */

}

/* elemen yang lebih dalam */
: -webkit -video skrin penuh {
lebar: 100%;
tinggi: 100%;
}


/* menggayakan tirai latar */
::latar belakang {
/* sifat */
}


Dalam sesetengah kes, WebKit memerlukan beberapa pemprosesan khas, jadi apabila berurusan dengan multimedia, anda mungkin memerlukan kod di atas.

Saya rasa API Skrin Penuh sangat mudah dan sangat berguna Kali pertama saya melihat API ini adalah dalam permainan penembak orang pertama pelanggan penuh yang dipanggil demo Roti Pisang MDN, yang benar-benar cara yang hebat. untuk menggunakan mod skrin penuh.

API skrin penuh menyediakan cara untuk masuk dan keluar dari mod skrin penuh, dan menyediakan acara yang sepadan untuk memantau perubahan dalam status skrin penuh, supaya semua aspek adalah koheren.

Hanya ingat API yang hebat ini - ia pasti akan berguna pada satu ketika pada masa hadapan!