CODEWITHSUNDEEP
htmlvideo
DieVeenman
DieVeenman

Reputation: 457

Always showing video controls

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

>

Upvotes: 11

Views: 25743

Answers (2)

vdegenne
vdegenne

Reputation: 13298

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.

Upvotes: -1

l33tstealth
l33tstealth

Reputation: 899

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/

Upvotes: 20

Related Questions