Always showing video controls

Question

Is there a way to Always show the video controls in the HTML5 video tag instead of just showing them on MouseOver?

Video code:

<table cellpadding="0" cellspacing="0">
  <tr>
    <td runat="server" width="680px" height="383px" id="vContainer">
      <div style="z-index: 1;" runat="server" id="cont">
        <div runat="server" style="background: rgba(200, 200, 200, 0.6) url('/images/Play.png') no-repeat center center;" id="img">
        </div>
        <video id="player" style="z-index: 1; border: 1px solid #000000;" width="100%" height="100% "
          title="" controls runat="server">
          <source runat="server" id="ffVideo" type="video/ogg" />
          <source runat="server" id="mp4Video" type="video/mp4" />
        </video>
        <embed id="playerOld" width="680px" height="383px" autostart="false" allowfullscreen="true"
          title="" style="display: none" type="application/mp4" runat="server" />
      </div>
    </td>
  </tr>
</table

>

You can found solution on [this post].[1] [1]: http://stackoverflow.com/questions/13384276/videojs-keep-controls-visible — Anibal Díaz, Aug 27 '15 at 10:19
My question is about the HTML5 video tag not the Javascript Library VideoJS... — DieVeenman, Aug 27 '15 at 10:22

score 19 · Accepted Answer · edited Sep 19 '18 at 06:57

19

Update November 2017: Please note due to new changes in Safari 11, this is no longer working in that browser. I will update the post if I find a way.

Even though hiding controls is part of the HTML5 video spec. There are two ways to accomplish this one via javascript and the other via CSS.

In Javascript, you can add an event handler for the timeupdate event which changes every time the play position has changed, in other words, the event is always occurring while the video is playing.

Assuming the id for the video element is called 'player', javascript code would look like this:

JS:

//assign video element to variable vid
var vid = document.getElementById("player");

function videoTimeUpdate(e)
{
    //set controls settings to controls,this make controls show everytime this event is triggered
    vid.setAttribute("controls","controls");
}

//add event listener to video for timeupdate event
vid.addEventListener('timeupdate', videoTimeUpdate, false);

Working sample of the above is here: https://jsfiddle.net/l33tstealth/t082bjnf/6/

The second way to do this is through CSS but this will only work for WebKit based browsers, thus limited. You can force the controls bar to always show.

The CSS for that would look like this:

CSS:

video::-webkit-media-controls-panel {
    display: flex !important;
    opacity: 1 !important;
}

Working sample (only works in web kit based browsers): https://jsfiddle.net/l33tstealth/t082bjnf/7/

edited Sep 19 '18 at 06:57

Yashwardhan Pauranik

5,370
5
42
65

answered Mar 31 '17 at 16:10

l33tstealth

821
8
15

This got me out of a jam. Used the css one since our app is accessed local via chrome browsers only. – Dan Zuzevich Nov 03 '17 at 14:32
both solutions did not work for me in a current safari (11.0.1). – ZPiDER Nov 14 '17 at 08:50
Thank you for the comment, I will update my post. Tried to find a way to make it work but seems like the new changes on Safari 11 not allowing for this, I will be on the lookout. If you or anyone knows of a way please comment. – l33tstealth Nov 22 '17 at 19:59
Thanks for sharing this! I switched it some to use jQuery's "on( 'timeupdate' )" and an anonymous function callback using "$(this).prop('controls','controls')". – justdan23 Dec 20 '18 at 20:08
Ugh, my controls now won't even turn on after I remove this code. There must be something in Firefox which much be caching the video tag. – justdan23 Dec 20 '18 at 21:09
Just an addition to the accepted answer - here is my one-liner `````` – Alex Bacart Jan 14 '23 at 13:31

score 0 · Answer 2 · answered May 31 '22 at 21:03

This worked for me

function keepControls () {
  video.removeAttribute('controls')
  video.setAttribute('controls', '')
}

video.addEventListener('timeupdate', keepControls)

The trick is to remove the controls and add them again quickly enough to look like they never disappear.

Always showing video controls

2 Answers2

Linked