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?

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, Feb 19 '15 at 08:53
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, Feb 19 '15 at 08:59
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, Feb 19 '15 at 09:11
@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, Feb 19 '15 at 10:02

Ahosan Karim Asik · Answer 1 · 2015-02-19T09:44:06.100

9

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>

edited Feb 19 '15 at 09:44

answered Feb 19 '15 at 09:06

Ahosan Karim Asik

3,219
1
18
27

adding a drag event to determine seeking forward and back would be cool too – Sarfaraaz Mar 11 '16 at 07:56

score 1 · Answer 2 · edited May 23 '17 at 12:34

1

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

edited May 23 '17 at 12:34

Community

1
1

answered Feb 19 '15 at 08:48

Javi Qualms Pdog

55
6

score 0 · Answer 3 · answered Apr 01 '17 at 21:41

0

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

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

to the stylesheet.

answered Apr 01 '17 at 21:41

maaw

1,276
13
13

score 0 · Answer 4 · answered Nov 29 '20 at 23:09

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>

score 0 · Answer 5 · answered Aug 16 '21 at 04:23

0

use this:

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

answered Aug 16 '21 at 04:23

vortesnail

31
5

The original poster was after a way to control the hiding/showing of controls based on user activity, or state of the player, without needing to jump into script / css land. Additionally, this will just hide the controls completely. – Paul Aug 16 '21 at 05:08
But when you right-click the video, there is a menu list, you can select "show controls", When you write your own control bar, due to the user's choice to display the native control bar, this will lead to two control bars overlapping, my answer is to avoid this situation, in fact, this is only chrome effective, Safari and Firefox are not, see youtube – vortesnail Aug 17 '21 at 01:05
Yeah - I came to the same conclusion - meaning that the only way to tackle this cross browser is to dip into the realm of writing client-specific scripts / styles. I also suspect the main streaming platforms (eg: youtube) probably achieve the "default behaviour" mentioned by OP by custom script that makes the behaviour uniform across different browser clients. – Paul Aug 17 '21 at 04:07

score -2 · Answer 6 · answered Feb 19 '15 at 08:42

-2

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

answered Feb 19 '15 at 08:42

THE AMAZING

1,496
2
16
38

Hide (not remove) HTML5 video controls

6 Answers6