Hide (not remove) HTML5 video controls

Question

Every question on the subject explain how to remove the controls of an HTML5 video element.

videoElement.removeAttribute('controls');

But browsers, Firefox and Chrome, have a way of just hiding the controls which makes them disappear when cursor is not moving and the video is playing. And makes them appear again if you move the cursor or when video stops playing.

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

^{Video test file: http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4}

If you play the above video, and leave it alone without moving the cursor, the controls will disappear. The if you move the cursor again they'll appear again. They'll also appear upon pausing or video finishing.

Very much like popular native or desktop video players.

This is what I want. I want to hide the controls the same way they would automatically hide if the video were playing and the cursor hasn't moved for a while.

Is there a way to achieve this without removing the controls entirely?

Answer 1

Try this:

$("#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>

Answer 2

Put a div over the video and hide/show that, you answered your own question;

I want to hide the controls the same way they would automatically hide if the video were playing and the cursor hasn't moved for a while.

Also take a look at this;

Styling HTML5 Video Controls