Comment masquer la barre de contrôle plein écran en javascript

JavaScript est le langage de programmation le plus populaire dans le développement Web et est principalement utilisé pour obtenir l'interactivité et la dynamique des pages Web. Parmi eux, masquer la barre de contrôle plein écran est également l'une des fonctions que JavaScript peut réaliser. Dans cet article, nous verrons comment masquer la barre de contrôle plein écran à l'aide de JavaScript.

Dans la conception Web moderne, la vidéo et l'audio plein écran sont devenus une tendance de conception très populaire. Cependant, pour certaines applications Web ou sites Web, une vidéo ou un son plein écran non autorisé peut perturber les utilisateurs. À ce stade, masquer la barre de contrôle plein écran devient une fonction nécessaire. En masquant la barre de contrôle plein écran, les utilisateurs ne pourront pas sélectionner librement le volume, mettre en pause ou quitter le mode plein écran en mode plein écran. Cette fonctionnalité peut réduire considérablement les erreurs d’utilisation des utilisateurs et créer une meilleure expérience pour le contenu Web.

De manière générale, masquer la barre de contrôle plein écran nécessite la création de scripts utilisant JavaScript. Voici quelques façons d'implémenter cette fonctionnalité :

1. Utilisation de l'API vidéo H5
   L'API vidéo H5 est un nouvel attribut HTML5 grâce auquel le comportement du lecteur vidéo peut être contrôlé. Parmi eux, la barre de contrôle plein écran peut être masquée en définissant la valeur de l'attribut « controls » sur « false ». Ce changement s'applique à toutes les vidéos 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. Utiliser l'API plein écran
   L'API plein écran est un nouveau développement de la spécification HTML5, grâce auquel n'importe quel élément est accessible en mode plein écran. Parmi eux, la barre de contrôle plein écran peut être masquée en définissant la valeur de l'attribut "allowfullscreen" sur "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. Utiliser les styles CSS
   La barre de contrôle plein écran peut également être masquée via les styles CSS. La méthode spécifique est la suivante :

<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>

Grâce à la méthode ci-dessus, nous pouvons facilement masquer la barre de contrôle plein écran. Cependant, il convient de noter que les méthodes ci-dessus doivent obtenir l'élément plein écran du DOM HTML avant de le contrôler. Par conséquent, nous devons d’abord comprendre certaines méthodes courantes de manipulation du DOM.

Pour résumer, si nous voulons masquer la barre de contrôle plein écran via JavaScript, nous devons considérer les aspects suivants : quelle méthode utiliser pour effectuer l'opération de masquage, quels éléments DOM doivent être utilisés et comment modifier les éléments du DOM. Pour les utilisateurs qui utilisent des applications Web depuis longtemps, utiliser JavaScript pour masquer la barre de contrôle plein écran est un bon moyen d'améliorer l'expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!