VideoJS : keep controls visible

问题:

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 !

回答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>

回答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;
}

回答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 !

回答4:

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*/
}