VideoJS : keep controls visible

Question

I like videoJS but can't find a way to keep the control bar always visible (no fade out when playing). I searched for informations about that and found a topic about it, where they advice to override the function conceal like this :

/override controls autohide fn/

conceal = function(){ /* nothing */ };

But this may be outdated since it doesn't work here. (Version 3.2.0)

Does anyone knows how I could achieve this ?

Thanks a lot !

Answer 1

Just one more bit of necromancy here...

While the last answer by Peter Kitts will work fine, another option is to set the inactivityTimeout to 0, which disables the inactivity timeout altogether.

<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>

<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" 
  data-setup='{ "inactivityTimeout": 0 }'>
  <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
  <source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm'>
</video>

Answer 2

I know this question is a couple of years old now but I've needed to do this too and the above answers keep the controls over the top of the video. I've used the following CSS in my own CSS file to override the videoJS styles to keep the controls visible once the video has started playing and to keep them below the video.

.vjs-default-skin.vjs-has-started .vjs-control-bar {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  bottom: -3.4em !important;
  background-color: rgba(7, 20, 30, 1) !important;
}

Answer 3

Thanks ! I found another solution, as I wanted to avoid to hack the original file, adding this is my CSS :

.vjs-fade-in,.vjs-fade-out {
visibility: visible !important;
opacity: 1 !important;
transition-duration: 0s!important;
}

Thanks !