web-dev-qa-db-fra.com

Masquer (ne pas supprimer) les contrôles vidéo HTML5

Chaque _ { question _ { on _ { le le sujet explique comment supprimer les commandes d'un élément vidéo HTML5.

videoElement.removeAttribute('controls');

Mais les navigateurs, Firefox et Chrome, permettent de cacher les commandes qui les font disparaître lorsque le curseur ne bouge pas et que la vidéo est en cours de lecture. Et les fait réapparaître si vous déplacez le curseur ou lorsque la vidéo cesse de jouer. 

<video controls><source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>

Fichier de test vidéo: http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4

Si vous lisez la vidéo ci-dessus et que vous la laissez seule sans déplacer le curseur, les commandes disparaîtront. Si vous déplacez à nouveau le curseur, ils réapparaîtront. Ils apparaîtront également lors de la pause ou de la fin de la vidéo. 

Très semblable aux lecteurs vidéo natifs ou de bureau populaires. 

C'est ce que je veux. Je souhaite masquer les commandes de la même manière que si elles visionnaient la vidéo et que le curseur ne bougeait pas depuis un moment.

Y a-t-il un moyen d'y parvenir sans supprimer entièrement les contrôles? 

javascripthtml5video
8
laggingreflex

Essaye ça: 

$("#myvideo").hover(function() {
  $(this).prop("controls", true);
}, function() {
  $(this).prop("controls", false);

});

// if always hide

$("#myvideo2").click(function() {
 if( this.paused)
   this.play();
  else
    this.pause();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<video id="myvideo" width="200"   >
  <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
</video>
<br/>All time hide controls:<br/>
<video id="myvideo2" autoplay  width="200" >
  <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
</video>

8
Ahosan Karim Asik

Mettez une div sur la vidéo et masquer/montrer que, vous avez répondu à votre propre question;

Je souhaite masquer les commandes de la même manière que si la lecture était en cours et que le curseur n'a pas bougé depuis un moment

Jetez également un coup d'oeil à ceci;

Styling Contrôles vidéo HTML5

1
Javi Qualms Pdog

J'utilise la bibliothèque de videojs.com et la solution consistait à ajouter

.vjs-control-bar {
    display:none !important;
}

à la feuille de style.

0
maaw