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

>

Answer 1

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/