Bagaimana untuk menyembunyikan bar kawalan skrin penuh dalam javascript

JavaScript ialah bahasa pengaturcaraan yang paling popular dalam pembangunan web dan digunakan terutamanya untuk mencapai interaktiviti dan dinamik pada halaman web. Antaranya, menyembunyikan bar kawalan skrin penuh juga merupakan salah satu fungsi yang boleh dicapai oleh JavaScript. Dalam artikel ini, kita akan membincangkan cara menyembunyikan bar kawalan skrin penuh menggunakan JavaScript.

Dalam reka bentuk web moden, video dan audio skrin penuh telah menjadi trend reka bentuk yang sangat popular. Walau bagaimanapun, untuk sesetengah aplikasi web atau tapak web, video atau audio skrin penuh yang tidak dibenarkan mungkin mengganggu pengguna. Pada masa ini, menyembunyikan bar kawalan skrin penuh menjadi fungsi yang diperlukan. Dengan menyembunyikan bar kawalan skrin penuh, pengguna tidak akan dapat memilih volum, jeda atau keluar dari mod skrin penuh dalam mod skrin penuh secara bebas. Ciri ini boleh mengurangkan kesilapan pengguna dan mencipta pengalaman yang lebih baik untuk kandungan web.

Secara umumnya, menyembunyikan bar kawalan skrin penuh memerlukan skrip menggunakan JavaScript. Berikut ialah beberapa cara untuk melaksanakan ciri ini:

1. Menggunakan API Video H5
   API Video H5 ialah atribut baharu dalam HTML5 yang melaluinya gelagat pemain video boleh dikawal. Antaranya, bar kawalan skrin penuh boleh disembunyikan dengan menetapkan nilai atribut "kawalan" kepada "palsu". Perubahan ini digunakan pada semua video HTML5.

<video id="myVideo" width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

<script>
var myVideo = document.getElementById("myVideo");
myVideo.controls = false;
</script>

2. Menggunakan API Skrin Penuh
   API skrin penuh ialah perkembangan baharu dalam spesifikasi HTML5, yang mana mana-mana elemen boleh diakses dalam mod skrin penuh. Antaranya, bar kawalan skrin penuh boleh disembunyikan dengan menetapkan nilai atribut "allowfullscreen" kepada "false".

<video id="myVideo" width="320" height="240" allowfullscreen>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

<script>
var myVideo = document.getElementById("myVideo");
myVideo.allowfullscreen = false;
</script>

3. Gunakan gaya CSS
   Bar kawalan skrin penuh juga boleh disembunyikan melalui gaya CSS. Kaedah khusus adalah seperti berikut:

<video id="myVideo" width="320" height="240" class="my-video">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

<style>
.my-video::-webkit-media-controls {
  display:none !important;
}
</style>

Melalui kaedah di atas, kita boleh menyembunyikan bar kawalan skrin penuh dengan mudah. Walau bagaimanapun, perlu diingat bahawa kaedah di atas perlu mendapatkan elemen skrin penuh daripada DOM HTML sebelum mengawalnya. Oleh itu, kita perlu terlebih dahulu memahami beberapa kaedah manipulasi DOM biasa.

Ringkasnya, jika kita ingin menyembunyikan bar kawalan skrin penuh melalui JavaScript, kita perlu mempertimbangkan aspek berikut: kaedah mana yang hendak digunakan untuk melaksanakan operasi penyembunyian, elemen DOM yang perlu dikendalikan, dan cara mengubah suai elemen DOM. Bagi pengguna yang bergantung pada aplikasi web untuk masa yang lama, menggunakan JavaScript untuk menyembunyikan bar kawalan skrin penuh ialah cara yang baik untuk meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Bagaimana untuk menyembunyikan bar kawalan skrin penuh dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!