Tampilan Layar Penuh HTML fullscreenEnabled DOM
Method fullscreenEnabled() pada DOM HTML digunakan untuk memeriksa dokumen yang akan ditampilkan dalam mode layar penuh atau tidak. Method ini akan mengembalikan nilai Boolean tunggal yang bersifat read-only. Method fullscreenEnabled() membutuhkan prefiks spesifik untuk bekerja dengan browser yang berbeda.
Sintak: document.fullscreenEnabled()
Parameter: Method ini tidak menerika jenis parameter apapun.
Sebelum memahami lebih dalam materi tentang Tampilan Layar Penuh HTML fullscreenEnabled DOM, terlebih dahulu pelajari materi tentang: Membuat Fullscreen HTML Menggunakan fullscreenElement DOM, Membuat Daftar Form HTML Menggunakan Forms Collection DOM, dan Memberikan Perintah Spesifik HTML Menggunakan execCommand DOM.
Parameter: Method ini tidak menerika jenis parameter apapun.
Return Values: Berfungsi untuk mengembalikan nilai boolean.
- True: Jika dokumen ingin ditampilkan dalam mode layar penuh.
- False: Jika dokumen tidak ditampilkan dalam mode layar penuh.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Method fullscreenEnabled() DOM HTML
</title>
<!-- script untuk memeriksa
full screen enabled atau
tidak -->
<script>
function requestFullScreen()
{
let isFullscreenSupported =
/* Sintak Standar */
(document.fullscreenEnabled ||
/* Chrome, Safari, dan Opera
*/
document.webkitFullscreenEnabled ||
/* Firefox */
document.mozFullScreenEnabled ||
/* IE/Edge */
document.msFullscreenEnabled);
document.querySelector('.isSupported').innerHTML
= isFullscreenSupported;
}
</script>
</head>
<body>
<h1>
Blog Elfan
</h1>
<h2>
Method fullscreenEnabled()
</h2>
<!-- script dipanggil -->
<button onclick="requestFullScreen();">
Periksa dukungan fullscreen
</button>
<p>
Dukungan Fullscreen:
</p>
<div class="isSupported"></div>
</body>
</html>
Output:
Blog Elfan
Method fullscreenEnabled()
Dukungan Fullscreen:
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Method fullscreenEnabled()
DOM HTML
</title>
<!-- script untuk enable full
screen -->
<script>
function goFullScreen()
{
if
(
/* Sintak Standar */
document.fullscreenEnabled ||
/* Chrome, Safari, dan Opera
*/
document.webkitFullscreenEnabled ||
/* Firefox */
document.mozFullScreenEnabled ||
/* IE/Edge */
document.msFullscreenEnabled
)
{
elem = document.querySelector('#image');
elem.requestFullscreen();
}
else
{
console.log('Fullscreen not enabled')
}
}
</script>
</head>
<body>
<h1>
Blog Elfan
</h1>
<h2>
Method fullscreenEnabled()
DOM HTML
</h2>
<img
id = "image"
src =
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5dlr7i-I5tKd_qP_npv8yC4bmEpyqm8ofl4iULjU60caEfiKfilDGEwrWy5Vkl_7yWoz0qx6Njv-8G2-UiJY0TWJ3YoE9xlf6a-gE3GBsW3uIuCfU7fCtbXdhncM7zrLOlHuGLbEe9-8/s393/Capture.PNG" />
<br>
<button onclick = "goFullScreen();">
Fullscreen
</button>
</body>
</html>
Tampilan layar penuh dalam halaman web memberikan pengalaman pengguna yang lebih imersif dengan menghilangkan elemen-elemen lainnya yang ada di sekitar tampilan utama. Fitur ini memungkinkan pengguna untuk melihat konten lebih leluasa tanpa gangguan dari antarmuka pengguna atau elemen-elemen lain dalam halaman. Dalam konteks pengembangan situs web, fitur tampilan layar penuh dapat diaktifkan menggunakan properti tertentu yang dimiliki oleh obyek pengendali dokumen dalam sistem pemrograman web.
Salah satu aspek teknis yang berperan dalam mengaktifkan tampilan layar penuh adalah properti fullscreenEnabled dalam model objek dokumen. Properti ini memberikan informasi tentang apakah kemampuan untuk beralih ke tampilan layar penuh didukung oleh perangkat atau lingkungan tempat situs web dijalankan. Dengan kata lain, properti fullscreenEnabled menunjukkan apakah perangkat pengguna memungkinkan aplikasi atau situs web untuk memanfaatkan mode tampilan layar penuh. Jika properti ini mengembalikan nilai benar, maka aplikasi dapat beralih ke tampilan layar penuh. Sebaliknya, jika mengembalikan nilai salah, maka pengaktifan mode layar penuh tidak memungkinkan.
Fitur ini terutama berguna pada aplikasi berbasis web yang memiliki konten visual, seperti pemutar video, presentasi, dan permainan berbasis web. Dengan memungkinkan tampilan layar penuh, pengembang dapat memberikan pengalaman yang lebih baik bagi pengguna dalam menikmati konten tanpa gangguan elemen-elemen lain yang mungkin ada di sekitarnya. Hal ini juga memanfaatkan luas layar perangkat untuk menampilkan konten dalam ukuran penuh.
Baca Juga:
Namun, meskipun tampilan layar penuh memberikan banyak manfaat, ada beberapa batasan yang perlu dipahami. Tidak semua perangkat mendukung mode tampilan layar penuh, terutama perangkat lama atau perangkat dengan keterbatasan teknis tertentu. Selain itu, pengguna harus memberikan izin agar situs web atau aplikasi dapat beralih ke mode layar penuh. Oleh karena itu, pemeriksaan properti fullscreenEnabled sangat penting sebelum mencoba mengaktifkan mode tampilan layar penuh.
Ada berbagai skenario dimana tampilan layar penuh bisa sangat menguntungkan. Misalnya, dalam pemutaran video, tampilan layar penuh memungkinkan pengguna untuk menonton video dengan lebih fokus tanpa gangguan dari elemen lain pada halaman web. Dalam permainan berbasis web, tampilan layar penuh dapat meningkatkan pengalaman bermain dengan memberikan ruang ekstra untuk visual game, yang membuat pengalaman bermain semakin mendalam. Selain itu, dalam presentasi berbasis web, mode tampilan layar penuh memberi keleluasaan untuk menampilkan informasi tanpa gangguan dari elemen-elemen antarmuka pengguna, memberikan kesan profesional dan terfokus.
Penggunaan tampilan layar penuh tidak selalu terjadi secara otomatis. Dalam banyak kasus, pengembang perlu menambahkan logika untuk memeriksa apakah perangkat mendukung fitur ini dan memutuskan kapan dan bagaimana mode layar penuh harus diaktifkan. Sebagai contoh, jika pengguna memilih untuk menonton video dalam tampilan layar penuh, pengembang mungkin perlu memeriksa apakah perangkat dan browser mendukung fitur ini terlebih dahulu menggunakan properti fullscreenEnabled. Jika perangkat mendukung, maka pengguna bisa diminta untuk beralih ke layar penuh. Hal ini penting agar pengalaman pengguna tetap mulus dan tanpa gangguan yang tidak diinginkan.
Dalam beberapa platform, pengguna bisa diminta untuk memberikan izin sebelum situs web atau aplikasi dapat mengalihkan tampilan ke mode layar penuh. Proses ini mungkin memerlukan interaksi pengguna untuk memastikan bahwa pengguna benar-benar ingin memanfaatkan tampilan layar penuh. Fitur semacam ini memastikan bahwa pengguna tetap dapat mengendalikan apa yang terjadi pada perangkat, sekaligus memberikan opsi untuk memanfaatkan fitur tampilan layar penuh jika diinginkan.
Proses beralih ke tampilan layar penuh biasanya melibatkan peralihan seluruh antarmuka pengguna ke ukuran layar maksimal, menghilangkan batasan-batasan yang umumnya ada di halaman web. Dalam mode layar penuh, elemen-elemen seperti bilah alamat browser, tombol kontrol, dan elemen-elemen lainnya sering kali disembunyikan untuk memberikan ruang maksimal bagi konten yang sedang ditampilkan. Hal ini meningkatkan pengalaman pengguna dalam mengonsumsi konten, menjadikan tampilan lebih terfokus dan imersif. Bagi pengembang, fitur ini menjadi alat yang penting untuk menciptakan pengalaman yang lebih memuaskan, terutama pada aplikasi berbasis multimedia.
Namun, dalam mengimplementasikan tampilan layar penuh, ada juga tantangan dan pertimbangan tertentu yang harus diperhatikan. Salah satunya adalah pengaruh terhadap responsivitas halaman. Ketika tampilan layar penuh diaktifkan, pengaturan tata letak dan elemen-elemen dalam halaman mungkin perlu disesuaikan agar tetap terlihat optimal pada berbagai perangkat dengan ukuran layar yang berbeda-beda. Hal ini menjadi penting untuk memastikan bahwa tampilan konten tetap konsisten dan nyaman untuk dilihat, baik dalam mode layar penuh maupun dalam ukuran layar biasa.
Selain itu, tampilan layar penuh bisa saja mempengaruhi pengelolaan elemen-elemen lain yang ada di halaman, seperti kontrol interaksi pengguna dan elemen-elemen antarmuka lainnya. Oleh karena itu, pengelolaan elemen-elemen ini menjadi hal yang krusial untuk memastikan pengalaman pengguna tetap optimal dalam berbagai mode tampilan. Pengembang harus memastikan bahwa transisi antara tampilan layar penuh dan tampilan normal berjalan mulus tanpa mengganggu alur interaksi pengguna dengan aplikasi atau situs web.
Fitur fullscreenEnabled menjadi sangat penting dalam konteks modern pengembangan situs web, terutama dengan semakin berkembangnya teknologi dan perangkat yang digunakan oleh pengguna. Penggunaan teknologi ini memberikan fleksibilitas bagi pengembang dalam merancang aplikasi dan situs web yang dapat beradaptasi dengan baik terhadap berbagai ukuran layar dan perangkat, baik itu perangkat desktop, tablet, ataupun ponsel pintar. Sebagai tambahan, tampilan layar penuh dapat memberikan pengalaman visual yang lebih memuaskan, meningkatkan keterlibatan pengguna, dan memperkuat daya tarik aplikasi atau situs web tersebut.
Namun, penting untuk dicatat bahwa fitur tampilan layar penuh, meskipun menawarkan banyak keuntungan, juga harus digunakan dengan bijak. Penggunaan fitur ini yang berlebihan atau tidak pada tempatnya bisa saja mengganggu kenyamanan pengguna, terutama jika tidak disertai dengan kontrol atau pengaturan yang tepat. Pengguna harus merasa nyaman dan memiliki kontrol atas pengalaman saat menggunakan aplikasi atau situs web. Oleh karena itu, pengembang perlu memperhatikan pengalaman pengguna secara keseluruhan dan memanfaatkan fitur layar penuh hanya pada situasi yang paling relevan.
Tampilan layar penuh, dengan dukungan dari properti fullscreenEnabled, memberi kesempatan bagi pengembang untuk menghadirkan pengalaman pengguna yang lebih imersif dan fokus. Meskipun demikian, penting untuk memastikan bahwa fitur ini diterapkan secara tepat dan bijak, dengan memperhatikan kebutuhan perangkat, antarmuka pengguna, dan responsivitas halaman. Dengan pertimbangan yang matang, tampilan layar penuh dapat meningkatkan kualitas pengalaman pengguna secara signifikan, baik dalam aplikasi berbasis video, permainan, presentasi, maupun aplikasi berbasis web lainnya.
Referensi Tambahan:
- 2 Contoh Penggunaan Method hasFocus() DOM pada HTML
- Cara Penggunaan Properti Head DOM pada HTML
- 3 Contoh Penggunaan Properti Image Collection DOM pada HTML
- 2 Contoh Penggunaan Properti Implementation DOM pada HTML
- 2 Contoh Penggunaan Method importNode() DOM pada HTML
- Cara Penggunaan Properti inputEncoding DOM pada HTML
- Cara Penggunaan Properti lastModified DOM pada HTML
Artikel ini akan dibaca oleh: Annisa Noor Rahmawati, Antoinette Kirsten Jocelin Sugiarto, Arviant Dwi Andhika Gunawan, Atharaditya Yumna Yafi, dan Aulia Listyaningrum.
5 komentar untuk "Tampilan Layar Penuh HTML fullscreenEnabled DOM"
Hubungi admin melalui Wa : +62-896-2414-6106
Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.
Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.
- Ikatlah Ilmu dengan Memostingkannya -
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan method fullscreenEnabled() pada dom html?
BalasHapusBerikut adalah jenis browser yang dapat digunakan untuk mengaktifkan method fullscreenEnabled() pada DOM HTML:
Hapus1. Google Chrome 45.0 -webkit-
2. Firefox 47.0 -moz-
3. Internet Explorer 11.0 -ms-
4. Apple Safari 5.1 -webkit-
5. Opera 15.0 -webkit-
Apa funsi method fullscreenEnabled() pada DOM HTML?
BalasHapusMethod fullscreenEnabled() berfungsi untuk mengembalikan nilai Boolean yang menunjukkan apakah dokumen dapat dilihat dalam mode layar penuh atau tidak.
HapusMethod fullscreenEnabled() akan mengembalikan nilai true jika mode layar penuh tersedia, jika tidak maka akan mengembalikan nilai false.
Tips:
Hapus1. Gunakan method element.requestFullscreen() untuk melihat elemen dalam mode layar penuh.
2. GUnakan method elemen.exitFUllscreen() untuk membatalkan mode layar penuh.