Vidéo HTML5 // Masquer complètement les contrôles

Question

Comment puis-je masquer complètement les contrôles vidéo HTML5 ?

<video width="300" height="200" controls="false" autoplay="autoplay">
<source src="video/supercoolvideo.mp4" type="video/mp4" />
</video> 

faux n'a pas fonctionné -- comment fait-on ?

A la vôtre.

Answer 1

Comme ça :

<video width="300" height="200" autoplay="autoplay">
  <source src="video/supercoolvideo.mp4" type="video/mp4" />
</video>

controls est un attribut booléen :

Remarque : les valeurs "true" et "false" ne sont pas autorisées pour les attributs booléens. booléens. Pour représenter une valeur fausse, l'attribut doit être complètement omis. être complètement omis.

Answer 2

Vous pouvez masquer les contrôles en utilisant des pseudo-sélecteurs CSS tels que Démo : https://jsfiddle.net/g1rsasa3

//For Firefox we have to handle it in JavaScript 
var vids = $("video"); 
$.each(vids, function(){
       this.controls = false; 
}); 
//Loop though all Video tags and set Controls as false

$("video").click(function() {
  //console.log(this); 
  if (this.paused) {
    this.play();
  } else {
    this.pause();
  }
});

video::-webkit-media-controls {
  display: none;
}

/* Could Use thise as well for Individual Controls */
video::-webkit-media-controls-play-button {}

video::-webkit-media-controls-volume-slider {}

video::-webkit-media-controls-mute-button {}

video::-webkit-media-controls-timeline {}

video::-webkit-media-controls-current-time-display {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<!-- Hiding HTML5 Video Controls using CSS Pseudo selectors -->

<video width="800" autoplay controls="false">
  <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>

Answer 3

Une solution simple consiste à ignorer les interactions des utilisateurs :-)

video {
  pointer-events: none;
}

Answer 4

Tout d'abord, supprimez l'attribut "controls" de la vidéo.
Pour iOS, nous pouvons masquer le bouton de lecture intégré à la vidéo en ajoutant le pseudo sélecteur CSS suivant :

video::-webkit-media-controls-start-playback-button {
    display: none;
}

Answer 5

Il existe deux façons de masquer les contrôles des balises vidéo

1. Retirer le controls de la balise vidéo.

2. Ajoutez le css à la balise vidéo

   video::-webkit-media-controls-panel {
   display: none !important;
   opacity: 1 !important;}