15

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 !

gordie
  • 1,637
  • 3
  • 21
  • 41

5 Answers5

43

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>
Matt McClure
  • 2,046
  • 2
  • 18
  • 19
  • I think your approach is the best of all, keeping controls visible using one of the videojs features. In my mind CSS is much more a workaround. – Maxooo Jul 22 '15 at 16:29
  • 7
    Is there a way to show the controls before the player starts? – Ericko Jul 25 '16 at 15:50
  • 1
    Nice solution, just for info I did it using the setup function: videojs("example_video_1", { inactivityTimeout : 0 } ); – Osama Abdulsattar Mar 19 '18 at 10:02
5

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;
}
Peter Kitts
  • 179
  • 1
  • 4
  • 1
    This seems like the best approach, but I think the only lines actually needed are `opacity: 1 !important;` and `visibility: visible !important;`, right? – dfrdmn Jan 15 '15 at 13:13
  • The 'bottom' rule keeps the controls below the video rather than on top, and 'display' overcomes a possible 'display:none'. – Peter Kitts Mar 05 '15 at 09:37
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 !

gordie
  • 1,637
  • 3
  • 21
  • 41
2

Comment out / remove the visibility:hidden and opacity:0 rules from the .vjs-fade-out and .vjs-default-skin .vjs-controls classes in video-js.css.

.vjs-fade-out {
    /*visibility: hidden!important;
    opacity: 0!important;*/
    -webkit-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
    -moz-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
    -ms-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
    -o-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
    transition: visibility 0s linear 1.5s,opacity 1.5s linear
}

.vjs-default-skin .vjs-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    height: 2.6em;
    color: #fff;
    border-top: 1px solid #404040;
    background: #242424;
    background: -moz-linear-gradient(top,#242424 50%,#1f1f1f 50%,#171717 100%);
    background: -webkit-gradient(linear,0% 0,0% 100%,color-stop(50%,#242424),color-stop(50%,#1f1f1f),color-stop(100%,#171717));
    background: -webkit-linear-gradient(top,#242424 50%,#1f1f1f 50%,#171717 100%);
    background: -o-linear-gradient(top,#242424 50%,#1f1f1f 50%,#171717 100%);
    background: -ms-linear-gradient(top,#242424 50%,#1f1f1f 50%,#171717 100%);
    background: linear-gradient(top,#242424 50%,#1f1f1f 50%,#171717 100%);
    /*visibility: hidden;
    opacity: 0*/
}
Sanjay Kamaruddin
  • 96
  • 1
0
.vjs-control-bar {
  display: flex !important;
}
Tyler2P
  • 2,324
  • 26
  • 22
  • 31
Rahul Kumar
  • 11
  • 1