Hiding video controls at end of playback

Question

Default behavior for the html video element causes the video controls to appear at the end of playback. Is there a way to change that behavior so that the video controls remain hidden?

I'm assuming that there is an if statement in the source code that determines if the controls are visible if the video has ended.

I've tried removing the controls when the video ends, but then the controls aren't accessible at all.

player.addEventListener('ended', () => {
  player.removeAttribute( 'controls' );
});

I've tried removing the controls and then setting the controls, but the controls still appear.

player.addEventListener('ended', () => {
  player.removeAttribute( 'controls' );
  player.setAttribute( 'controls', '' );
});

I've also tried just setting the controls to false, but that does the same as removing the attribute 'controls'.

player.addEventListener('ended', () => {
  player.controls = false
});

Set controls to false, and on video focus/touch/mouse interaction simply add them back. — Roko C. Buljan, Oct 23 '19 at 20:44

score 0 · Answer 1 · answered Oct 23 '19 at 21:02

0

Basically u were almost there. Just use

    player.addEventListener('ended', () => {
      player.removeAttribute('controls');
    });

(removed the video_obj)

answered Oct 23 '19 at 21:02

dev village

63
6

Oh sorry. I updated the OP. In my code the player was an object that had an attribute video_obj that was the actual video element. – kpete4678 Oct 23 '19 at 21:05
great. I don't think you can do what you want to simply by using the `controls` attribute. The option from Roko C. Buljan would be the easiest... – dev village Oct 23 '19 at 21:11

score 0 · Answer 2 · answered Oct 23 '19 at 21:07

0

I am using the following code to view a video in loop without any controls at all.

<video id="player" autoplay loop muted>
  <source src=".../your/source.mp4" type="video/mp4" />
</video>

answered Oct 23 '19 at 21:07

davidev

7,694
5
21
56

Hiding video controls at end of playback

2 Answers2