Membuat Fullscreen HTML Menggunakan fullscreenElement DOM
Properti fullscreenElement pada HTML digunakan untuk mengembalikan elemen yang saat ini sedang pada posisi fullscreen atau ditampilkan pada mode layar penuh. Properti ini mungkin membutuhkan prefix spesifik yang bekerja dengan browser yang berbeda pula.
Sintak: document.fullscreenElement
Return Value: mengembalikan elemen yang saat ini sedang dalam mode fullscreen atau null, jika mode fullscreen tidak tersedia.
Sebelum memahami lebih dalam materi tentang Membuat Fullscreen HTML Menggunakan fullscreenElement DOM, terlebih dahulu pelajari materi tentang: Membuat Daftar Form HTML Menggunakan Forms Collection DOM, Memberikan Perintah Spesifik HTML Menggunakan execCommand DOM, dan Embed Collection HTML DOM dan Fungsinya.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
method fullscreenElement
</title>
</head>
<body>
<h1 style="color: green">
Blog Elfan
</h1>
<p>
<b>
method fullscreenElement
</b>
</p>
<p>
Elemen fulscreen saat ini akan
muncul pada console setelah 5
detik.
</p>
<img id="image" src=
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgtScPwjtA7g64aDduxeEd6YdFJqUYA2IU0Vv2ysXZEw4PVziHYCoGp4SRQh6zz0BhzgZJ07-_-0M7-Hj70c0nWxZ85Iz3icubb5fR-UJYoreKKAk9JDuitrkcAX1yCKoeO93LrxHwgps/s2048/logo%2Bsman%2B8%2Bsemarang.png" />
<br>
<button onclick="goFullScreen();">
Mode fullscreen
</button>
<script>
/* Log elemen saat ini dalam
mode fullscreen */
function checkFullscreenElement()
{
console.log(
/* Sintak Standar */
document.fullscreenElement ||
/* Sintak untuk Browser
Chrome, Safari, dan Opera */
document.webkitFullscreenElement ||
/* Sintak Firefox */
document.mozFullScreenElement ||
/* Sintak IE/Edge */
document.msFullscreenElement)
}
/* Memanggil fungsi tersebut
setelah 5 detik, user tidak
dapat menekan tombol apapun
untuk mengeksekusi fungsi
selama dalam mode fullscreen
*/
setTimeout(checkFullscreenElement, 5000);
/* Go fullscreen */
function goFullScreen()
{
if (
/* Sintak Standar */
document.fullscreenEnabled ||
/* Sintak Chrome, Safari, dan
Opera */
document.webkitFullscreenEnabled ||
/* Sintak Firefox */
document.mozFullScreenEnabled ||
/* Sintak IE/Edge */
document.msFullscreenEnabled)
{
elem = document.querySelector('#image');
/* Try mode Fullscreen */
elem.requestFullscreen();
}
else
{
console.log('Fullscreen tidak tersedia saat ini.')
}
}
</script>
</body>
</html>
Membuat tampilan layar penuh pada sebuah halaman web menjadi salah satu fitur yang semakin sering digunakan oleh pengembang dalam membuat pengalaman pengguna yang lebih imersif. Layar penuh atau mode penuh layar dapat memberikan pengguna ruang yang lebih luas tanpa gangguan dari elemen lain pada antarmuka pengguna. Salah satu cara untuk mencapai ini dalam pengembangan halaman web adalah dengan menggunakan objek Fullscreen dan properti fullscreenElement yang tersedia dalam antarmuka pemrograman aplikasi (API) JavaScript. Pada artikel ini, akan dibahas tentang bagaimana menggunakan fullscreenElement DOM untuk mengubah tampilan halaman web menjadi layar penuh serta beberapa hal yang perlu diperhatikan dalam penggunaannya.
Pada awalnya, sebelum dapat menggunakan mode layar penuh, penting untuk memahami konsep dasar tentang layar penuh itu sendiri. Layar penuh merupakan tampilan dimana elemen dari sebuah halaman web mengisi seluruh ruang layar perangkat, termasuk menutupi elemen-elemen lain seperti bilah alamat browser, bilah alat, atau elemen antarmuka lainnya. Hal ini memberikan pengguna pengalaman yang lebih menyeluruh, yang sangat bermanfaat untuk aplikasi-aplikasi yang membutuhkan fokus penuh, seperti pemutar video atau aplikasi permainan.
FullscreenElement adalah salah satu properti dari antarmuka pemrograman aplikasi yang dapat digunakan untuk mendeteksi apakah halaman web atau elemen tertentu saat ini sedang berada dalam mode layar penuh. Properti ini merupakan bagian dari objek document dan memberikan akses langsung untuk mengetahui apakah mode layar penuh aktif pada halaman atau elemen yang dimaksud. Jika elemen tersebut sedang dalam mode layar penuh, properti fullscreenElement akan mengembalikan elemen tersebut; jika tidak, nilai properti ini akan bernilai null.
Penggunaan fullscreenElement dalam kode JavaScript memungkinkan pengembang untuk mengetahui status tampilan layar penuh dan dapat mengubah perilaku halaman sesuai dengan status tersebut. Sebagai contoh, jika halaman sudah berada dalam mode layar penuh, pengembang dapat menambahkan fungsi untuk keluar dari mode tersebut dengan cara memanipulasi elemen yang ada. Sebaliknya, jika halaman belum berada dalam mode layar penuh, pengembang dapat memulai proses masuk ke dalam mode layar penuh dengan menambahkan perintah yang tepat.
Namun, untuk dapat menggunakan fitur layar penuh dengan baik, pengembang perlu mempertimbangkan beberapa faktor, seperti hak akses dan interaksi dengan perangkat pengguna. Beberapa peramban hanya mengizinkan fitur layar penuh ini digunakan dalam konteks interaksi pengguna. Artinya, untuk mengaktifkan layar penuh, biasanya diperlukan suatu peristiwa, seperti klik atau sentuhan, yang berasal dari pengguna. Hal ini bertujuan untuk mencegah pengalaman yang mengganggu dimana halaman web secara otomatis mengalihkan tampilan menjadi layar penuh tanpa sepengetahuan atau persetujuan pengguna.
Baca Juga:
Selain itu, pengembang juga harus memperhatikan kenyamanan pengguna dalam menggunakan tampilan layar penuh. Sebagai contoh, tampilan layar penuh dapat membuat navigasi menjadi lebih sulit, terutama jika pengembang tidak menyediakan cara yang jelas bagi pengguna untuk keluar dari mode tersebut. Oleh karena itu, sangat penting untuk memberikan elemen yang mudah diakses, seperti tombol keluar atau fitur lain yang memungkinkan pengguna untuk kembali ke tampilan semula tanpa kesulitan.
Pada sisi teknis, fitur fullscreenElement juga terkait dengan beberapa peristiwa atau kejadian (event) yang perlu diwaspadai. Beberapa peramban mungkin mengharuskan pengembang untuk mendengarkan peristiwa khusus yang menandakan bahwa tampilan layar penuh telah dimulai atau dihentikan. Sebagai contoh, ketika pengguna masuk ke mode layar penuh, peramban dapat memicu peristiwa seperti fullscreenchange yang memberi tahu pengembang bahwa status tampilan telah berubah. Dengan mendengarkan peristiwa tersebut, pengembang dapat melakukan penyesuaian pada antarmuka pengguna, seperti mengubah tampilan tombol atau memperbarui elemen lain di halaman.
Selain peristiwa fullscreenchange, ada juga peristiwa fullscreenerror yang dapat terjadi jika pengguna tidak dapat memasuki mode layar penuh. Hal ini bisa disebabkan oleh berbagai alasan, seperti pengaturan privasi peramban atau perangkat yang tidak mendukung fitur layar penuh. Oleh karena itu, pengembang perlu mempersiapkan aplikasi agar dapat menangani kesalahan-kesalahan ini dengan cara yang sesuai, misalnya dengan menampilkan pesan kepada pengguna jika tampilan layar penuh tidak dapat diaktifkan.
Penggunaan layar penuh tidak hanya terbatas pada halaman web secara keseluruhan, tetapi juga dapat diterapkan pada elemen-elemen tertentu dalam halaman tersebut. Misalnya, pengembang dapat membuat elemen video atau gambar menjadi layar penuh, memberikan pengguna pengalaman yang lebih fokus saat menikmati konten media. Untuk melakukan ini, pengembang hanya perlu mengatur elemen tersebut untuk memasuki mode layar penuh dengan menggunakan metode yang tersedia dalam API layar penuh.
Beberapa peramban mendukung pengaturan layar penuh untuk elemen tertentu, seperti video atau gambar, sedangkan yang lainnya hanya mendukung layar penuh untuk seluruh halaman. Oleh karena itu, penting untuk memeriksa kompatibilitas perangkat dan peramban pengguna agar aplikasi atau halaman web dapat berjalan dengan lancar di berbagai platform.
Fitur layar penuh juga memberikan kesempatan bagi pengembang untuk meningkatkan aksesibilitas halaman. Sebagai contoh, bagi pengguna dengan gangguan penglihatan atau penglihatan yang terbatas, tampilan layar penuh dapat membuat teks atau gambar lebih mudah terlihat, memberikan pengalaman yang lebih baik saat berinteraksi dengan halaman web. Dengan memanfaatkan fullscreenElement dan fitur layar penuh, pengembang dapat membuat halaman web yang lebih ramah pengguna dan dapat diakses oleh lebih banyak orang.
Dalam kesimpulannya, fullscreenElement DOM merupakan fitur yang sangat berguna dalam menciptakan pengalaman pengguna yang lebih imersif dan fokus pada halaman web. Dengan menggunakan fitur ini, pengembang dapat memberikan pengalaman layar penuh yang dapat disesuaikan dengan berbagai kebutuhan dan jenis konten. Namun, penggunaannya harus dilakukan dengan hati-hati, memperhatikan hak akses, kenyamanan pengguna, dan kompatibilitas peramban. Dengan memanfaatkan layar penuh secara bijaksana, pengembang dapat menciptakan aplikasi web yang lebih interaktif dan menarik.
Untuk melanjutkan pembahasan tentang penggunaan fullscreenElement, perlu dipahami bahwa implementasi fitur layar penuh pada halaman web juga melibatkan aspek penting terkait dengan kontrol tampilan. Mode layar penuh memberikan pengembangan pengalaman pengguna yang tidak hanya lebih luas tetapi juga lebih mendalam. Dengan tampilan yang lebih besar, semua elemen pada halaman bisa tampil dengan lebih jelas dan lebih rinci, tanpa ada gangguan dari elemen lain yang tidak relevan.
Pada aplikasi berbasis web yang lebih interaktif, seperti permainan atau pemutar video, penggunaan fullscreenElement menjadi sangat krusial. Pengguna bisa menikmati konten dengan tampilan penuh tanpa terbagi perhatian antara elemen-elemen antarmuka pengguna lainnya. Hal ini juga meningkatkan fokus dan memperkuat pengalaman pengguna dalam berinteraksi dengan konten. Dalam banyak kasus, elemen-elemen seperti tombol kontrol pemutar video atau kontrol permainan dapat tersembunyi saat masuk ke mode layar penuh, dan muncul kembali saat pengguna mengarahkan kursor atau melakukan interaksi lainnya. Hal ini memberikan nuansa yang lebih alami dan imersif dalam aplikasi.
Penting untuk diingat bahwa meskipun layar penuh memberikan manfaat dari segi pengalaman visual, fitur ini tidak selalu diterima dengan baik oleh semua pengguna. Beberapa pengguna mungkin merasa tidak nyaman atau tidak tahu bagaimana cara keluar dari mode layar penuh. Oleh karena itu, pengembang harus mempertimbangkan untuk menambahkan cara keluar yang jelas dan mudah ditemukan, seperti tombol keluar atau gestur khusus yang memungkinkan pengguna untuk kembali ke tampilan semula. Tanpa opsi ini, pengguna mungkin merasa frustasi, terutama jika tidak tahu cara keluar dari tampilan layar penuh tersebut.
Aspek lain yang perlu diperhatikan adalah pengaruh penggunaan fullscreenElement terhadap kinerja halaman web. Dalam beberapa situasi, terutama pada perangkat dengan spesifikasi rendah atau koneksi internet yang tidak stabil, tampilan layar penuh bisa mempengaruhi kinerja. Misalnya, video yang diputar dalam mode layar penuh mungkin memerlukan lebih banyak sumber daya sistem, seperti daya pemrosesan grafis atau bandwidth untuk streaming. Oleh karena itu, pengembang perlu mengoptimalkan elemen-elemen yang digunakan dalam mode layar penuh agar tidak membebani perangkat pengguna. Pengujian yang menyeluruh pada berbagai perangkat sangat disarankan agar aplikasi web tetap dapat berjalan dengan lancar.
Selain itu, fullscreenElement juga berperan penting dalam mendukung pengalaman lintas perangkat. Dengan semakin banyaknya perangkat dengan ukuran layar yang beragam, mulai dari ponsel pintar hingga komputer desktop, pengembang perlu memastikan bahwa tampilan layar penuh dapat menyesuaikan diri dengan ukuran layar perangkat yang digunakan. Fitur layar penuh ini memungkinkan halaman atau elemen pada halaman untuk mengisi seluruh layar, terlepas dari ukuran perangkat. Namun, pengembang perlu memperhatikan bahwa beberapa perangkat mungkin memiliki batasan dalam mendukung tampilan layar penuh, terutama pada perangkat dengan sistem operasi yang lebih lama atau yang memiliki pengaturan privasi yang ketat.
Salah satu tantangan yang muncul dalam penggunaan fullscreenElement adalah kompatibilitas dengan berbagai peramban. Tidak semua peramban mendukung API layar penuh secara konsisten. Oleh karena itu, pengembang harus memeriksa apakah peramban yang digunakan oleh pengguna mendukung fitur ini. Dalam beberapa kasus, pengembang perlu menambahkan penanganan khusus atau fallback untuk peramban yang tidak mendukung layar penuh. Hal ini dapat mencakup pemberian pesan kepada pengguna bahwa fitur ini tidak tersedia atau menyediakan pengalaman alternatif yang tidak mengganggu.
Di samping itu, pengembang juga harus memperhatikan masalah aksesibilitas dalam menggunakan fitur layar penuh. Meskipun layar penuh bisa memberikan pengalaman visual yang lebih baik bagi sebagian besar pengguna, bagi beberapa pengguna dengan keterbatasan tertentu, mode layar penuh mungkin menambah kesulitan. Oleh karena itu, pengembang perlu menyediakan cara-cara alternatif untuk menavigasi atau mengontrol elemen-elemen pada halaman ketika berada dalam mode layar penuh. Fitur seperti kontrol suara, tombol fisik, atau dukungan untuk pembaca layar menjadi sangat penting dalam memastikan bahwa aplikasi tetap dapat diakses oleh semua pengguna, tanpa memandang kemampuan atau perangkat yang digunakan.
Dengan memanfaatkan fullscreenElement secara efektif, pengembang dapat menciptakan pengalaman yang lebih dinamis dan menarik. Namun, seperti halnya dengan semua fitur dalam pengembangan web, penggunaan fitur ini harus dilakukan dengan pertimbangan yang matang. Pengembang harus mengoptimalkan antarmuka pengguna, memperhatikan kenyamanan, dan menyediakan solusi bagi pengguna yang mungkin mengalami kesulitan saat menggunakan mode layar penuh. Pengujian yang menyeluruh dan umpan balik dari pengguna sangat penting untuk memastikan bahwa fitur layar penuh dapat digunakan dengan nyaman dan tidak mengganggu pengalaman pengguna secara keseluruhan.
Secara keseluruhan, fullscreenElement adalah alat yang sangat berguna dalam pengembangan aplikasi web yang bertujuan untuk memberikan pengalaman pengguna yang lebih baik dan lebih imersif. Dengan pengelolaan yang tepat, fitur layar penuh dapat meningkatkan keterlibatan pengguna dan membuat aplikasi web lebih menarik. Namun, pengembang harus tetap berhati-hati dalam mempertimbangkan aspek-aspek teknis dan kenyamanan pengguna agar pengalaman menggunakan aplikasi tetap lancar dan menyenangkan.
Referensi Tambahan:
- 2 Contoh Penggunaan Method getElementsByTagName() DOM pada HTML
- 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
Artikel ini akan dibaca oleh: Annisa Diah Kusuma Piri, Annisa Noor Rahmawati, Antoinette Kirsten Jocelin Sugiarto, Arviant Dwi Andhika Gunawan, dan Atharaditya Yumna Yafi.
5 komentar untuk "Membuat Fullscreen HTML Menggunakan fullscreenElement 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 -
Apa fungsi fullscreenElement pada html?
BalasHapusProperti fullscreenElement berfungsi untuk mengembalikan elemen saat ini yang ditampilkan dalam mode layar penuh, atau null saat tidak dalam mode tersebut.
HapusProperti fullscreenElement berfungsi untuk mengembalikan elemen yang saat ini dijasikan dalam mode layar penuh dalam dokumen saat ini, atau akan memberikan nilai null jika mode layar penuh sedang tidak digunakan.
HapusMeskipun hanya bersifat read-only, properti ini tidak akan dibuang jika dimodifikasi atau bahkan dalam mode strict.
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan fungsi fullscreenElement pada html?
BalasHapusBerikut adalah beberapa jenis browser populer dan dapat digunakan untuk mengaktifkan fungsi fullscreenElement pada html:
Hapus1. Google Chrome 45.0
2. Internet Explorer 11.0
3. Firefox 47.0
4. Opera 15.0
5. Safari 5.1