Hide (Do Not Delete) HTML5 Controls

Question

Each question on explain how to remove HTML5 video element controls.

videoElement.removeAttribute('controls'); 

But browsers, Firefox, and Chrome have a way to simply hide the controls that make them disappear when the cursor does not move and the video plays. And makes them appear again if you move the cursor or when the 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 disappear. If you move the cursor again, they will appear again. They will also appear when the video is paused or completed.

I really like popular native or desktop video players.

This is what I want. I want to hide the controls in the same way that they will be automatically hidden if the video was playing and the cursor did not move for a while.

Is there a way to achieve this without completely removing controls?

Answer 1

Try the following:

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

Place the div above the video and hide / show that you answered your own question;

I want to hide the controls in the same way that they automatically hide if the video is playing and the cursor does not move for a while.

Also take a look at this:

Styling HTML5 Controls

Answer 3

I am using the videojs.com library and the solution was to add

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

to the stylesheet.

Answer 4

you don't need javascript. use CSS. Display: no controls.