So blenden Sie die Vollbild-Steuerleiste in Javascript aus

JavaScript ist die beliebteste Programmiersprache in der Webentwicklung und wird hauptsächlich verwendet, um Interaktivität und Dynamik auf Webseiten zu erreichen. Unter anderem ist das Ausblenden der Vollbild-Steuerleiste auch eine der Funktionen, die JavaScript erreichen kann. In diesem Artikel besprechen wir, wie Sie die Vollbild-Steuerleiste mithilfe von JavaScript ausblenden.

Im modernen Webdesign sind Vollbild-Video und -Audio zu sehr beliebten Designtrends geworden. Bei einigen Webanwendungen oder Websites kann jedoch unautorisiertes Vollbild-Video oder -Audio für Benutzer störend sein. Zu diesem Zeitpunkt wird das Ausblenden der Vollbild-Steuerleiste zu einer notwendigen Funktion. Durch das Ausblenden der Vollbild-Steuerleiste können Benutzer im Vollbildmodus die Lautstärke nicht frei wählen, anhalten oder den Vollbildmodus verlassen. Diese Funktion kann Fehlbedienungen durch Benutzer erheblich reduzieren und ein besseres Erlebnis für Webinhalte schaffen.

Im Allgemeinen erfordert das Ausblenden der Vollbild-Steuerleiste Skripterstellung mit JavaScript. Hier sind mehrere Möglichkeiten, diese Funktion zu implementieren:

1. Verwendung der H5-Video-API
   Die H5-Video-API ist ein neues Attribut in HTML5, über das das Verhalten des Videoplayers gesteuert werden kann. Unter anderem kann die Vollbild-Steuerleiste ausgeblendet werden, indem der Attributwert „controls“ auf „false“ gesetzt wird. Diese Änderung gilt für alle HTML5-Videos.

<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. Vollbild-API verwenden
   Die Vollbild-API ist eine Neuentwicklung in der HTML5-Spezifikation, über die auf jedes Element im Vollbildmodus zugegriffen werden kann . Unter anderem kann die Vollbild-Steuerleiste ausgeblendet werden, indem der Attributwert „allowfullscreen“ auf „false“ gesetzt wird.

<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. CSS-Stile verwenden
   Die Vollbild-Steuerleiste kann auch über CSS-Stile ausgeblendet werden. Die spezifische Methode ist wie folgt:

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

Mit der oben genannten Methode können wir die Vollbild-Steuerleiste einfach ausblenden. Es ist jedoch zu beachten, dass die oben genannten Methoden das Vollbildelement aus dem HTML-DOM abrufen müssen, bevor sie es steuern können. Daher müssen wir zunächst einige gängige DOM-Manipulationsmethoden verstehen.

Zusammenfassend lässt sich sagen, dass wir, wenn wir die Vollbild-Steuerleiste über JavaScript ausblenden möchten, die folgenden Aspekte berücksichtigen müssen: welche Methode zum Durchführen des Ausblendvorgangs verwendet werden soll und welche DOM-Elemente vorhanden sein müssen betrieben und wie man die DOM-Elemente Revise bedient. Für Benutzer, die lange Zeit auf Webanwendungen angewiesen sind, ist die Verwendung von JavaScript zum Ausblenden der Vollbild-Steuerleiste eine gute Möglichkeit, das Benutzererlebnis zu verbessern.

Das obige ist der detaillierte Inhalt vonSo blenden Sie die Vollbild-Steuerleiste in Javascript aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!