Reputation: 34627

Hide (not remove) HTML5 video controls

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?

Upvotes: 10

Answers (6)

vortesnail

Reputation: 31

use this:

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

Upvotes: 0

Mojtaba Moosavi

Reputation: 26

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>

Upvotes: 0

maaw

Reputation: 1344

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

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

to the stylesheet.

Upvotes: 0

Ahosan Karim Asik

Reputation: 3299

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>

Upvotes: 9