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
});

user_12203709 · Answer

Basically u were almost there. Just use

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

(removed the video_obj)

user_11878069 · Answer

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

Hiding video controls at end of playback

2 Answers