Di bawah ini kita akan mempelajari cara membuat jendela layar penuh(fullscreen window) dengan JavaScript.
Fullscreen Window
Fullscreen window merupakan sebuah fungsi yang digunakan pada sebuah website biasanya digunakan untuk menonton sebuah video atau membaca sebuah dokumen dengan layar penuh(fullscreen) pada sebuah website. Di bawah ini ada sebuah video sebagai contoh fullscreen window, fullscreen windows dapat digunakan menggunakan javascript seperti di bawah ini:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <h2>Fullscreen Window with JavaScript</h2> <p> Klik tombol untuk membuka video dalam mode layar penuh. </p> <button onclick = "openFullscreen();"> Buka Video dalam Mode Layar Penuh </button> <p> <strong> note: </strong> Tekan tombol "Esc" untuk keluar dari layar penuh. </p> <video width="100%" controls id="myvideo"> <source src="https://dosenit.com/wp-content/uploads/2020/10/videoplayback-1.mp4" type="video/mp4"> <source src="https://dosenit.com/wp-content/uploads/2020/10/videoplayback-1.mp4" type="video/ogg"> Browser kamu tidak mendukung tag video. </video> <script> var elem = document.getElementById("myvideo"); function openFullscreen() { if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.webkitRequestFullscreen) { /* Safari */ elem.webkitRequestFullscreen(); } else if (elem.msRequestFullscreen) { /* IE11 */ elem.msRequestFullscreen(); } } </script> <p> Catatan: Internet Explorer 10 dan versi sebelumnya tidak mendukung metode msRequestFullscreen().</p> </body> </html>
Video Fullscreen Window
Untuk membuka elemen dalam layar penuh, kita akan menggunakan metode element.requestFullscreen():
Contoh
<script>
/* Dapatkan elemen yang ingin ditampilkan dalam mode fullscreen (video dalam contoh ini): */
var elem = document.getElementById("myvideo");
/* Saat fungsi openFullscreen() dijalankan, buka video dalam layar penuh.
Perhatikan bahwa kita harus menyertakan prefiks untuk browser yang berbeda, karena browser tersebut belum mendukung metode requestFullscreen */
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
elem.msRequestFullscreen();
}
}
</script>Dokumen Fullscreen Window
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Safari syntax */
:-webkit-full-screen {
background-color: DarkKhaki ;
}
/* IE11 */
:-ms-fullscreen {
background-color: Fuchsia;
}
/* Standard syntax */
:fullscreen {
background-color: LightBlue ;
}
/* Style the button */
button {
padding: 20px;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Fullscreen with JavaScript</h2>
<p>Klik pada tombol "Buka Fullscreen" untuk membuka halaman ini dalam mode layar penuh. Tutup dengan mengklik tombol "Esc" pada keyboard Anda, atau dengan tombol "Tutup Fullscreen".</p>
<button onclick="openFullscreen();">Buka Fullscreen</button>
<button onclick="closeFullscreen();">Tutup Fullscreen</button>
<script>
var elem = document.documentElement;
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
elem.msRequestFullscreen();
}
}
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) { /* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
}
</script>
<p>Note: Internet Explorer 10 dan versi sebelumnya tidak mendukung method msRequestFullscreen() .</p>
</body>
</html>
Untuk membuka seluruh halaman dalam layar penuh, gunakan document.documentElement sebagai ganti document.getElementById ("elemen"). Dalam contoh ini, kita juga akan menggunakan fungsi close untuk menutup layar penuh:
Contoh
<script>
/* Dapatkan documentElement (<html>) untuk menampilkan halaman dalam layar penuh */
var elem = document.documentElement;
/* View dalam fullscreen */
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
elem.msRequestFullscreen();
}
}
/* Tutup fullscreen */
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) { /* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
}
</script>Kita juga dapat menggunakan CSS untuk mengatur gaya halaman saat berada dalam mode layar penuh:
Contoh
/* Safari syntax */
:-webkit-full-screen {
background-color: DarkKhaki ;
}
/* IE11 */
:-ms-fullscreen {
background-color: Fuchsia;
}
/* Standard syntax */
:fullscreen {
background-color: Gray;
}