Hide (not remove) HTML5 video controls

10
votes

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?

6
javascripthtmlvideo
Do you mean that you have your own set of controls that you want to act in this way? You can hardly be trying to do it with the browser's default control set as they already act in this way, as you have said. – Ian Devlin
No, I just want to hide the default controls. I'm trying exactly to do it the way browser's default control hide themselves upon inactivity. Sort of like in a forced way, but after hiding I want the browser to take the control back, and then show them when it deems necessary again, like user has moved the cursor again or video has stopped. I just want to initially hide the controls. I don't want to remove them initially just hide them. Because removing them makes it unable to play with space-bar, or moving the time-line etc. – laggingreflex
I'm not sure you can access them other than hiding them completely, like you already said. WebKit allows you to access them in CSS via the ::-webkit-media-controls pseudo class, but Firefox doesn't appear to have something similar. – Ian Devlin
@AhosanKarimAsik & others, I really appreciate the answers, thanks! But all the answers are more or less already given in the various other related questions. I basically wanted to know the "default" way to "hide" the controls the same way Browsers themselves do it. Such that I don't have to worry about writing any css or javascript "hacks" to replicate the rest of the behaviour (like showing the controls again, play/pausing etc) manually, which browser's controls are already perfectly capable of. It appears it's not currently possible. – laggingreflex
@laggingreflex you just remove controls form <video > tag and for control play/pause you can use my click function which is provide in my answer.. – Ahosan Karim Asik

6 Answers

9
votes

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

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

0
votes

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

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

to the stylesheet.

0
votes

You can set event listener on your video and remove controls on play

<video id="video">
    <source src="http://example.com/video.mp4" type="video/mp4"/>
</video>

<script>
    video.addEventListener('play', () => {
        video.setAttribute('controls', 'true');
    });

    video.addEventListener('pause', () => {
        video.removeAttribute('controls')
    });
</script>
0
votes

use this:

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

you don't need javascript. use CSS. Display:none on the controls.