Video.js Force Flash Controls Display

Question

I'm starting to think there is no way to solve my video.js Flash fallback issue. I simply want the controls to be visible at all times on the desk-top. I have a CSS (code below) which handles this for the HTML5 video player. However, on the Flash fallback the bar stays but all the controls, play, volume, etc. still fade out. Please can anyone tell me how to keep the controls visible at all times on the Flash player.

Adding a comment this is happening on IE8 only Flash fallback.

    .video-js .vjs-control-bar { bottom: -30px; }
    .video-js .vjs-control-bar,.vjs-fade-in,.vjs-fade-out {
        visibility: visible !important;
        opacity: 1 !important;
        transition-duration: 0s !important;
        display: block !important;
    }

kaliatech kaliatech · Accepted Answer · 2014-07-25T15:19:17

I think you have something else going on because the CSS you posted does appear to keep the controls visible even when falling back to Flash player. I created a jsfiddle to test:

http://jsfiddle.net/kaliatech/y3VaK/

I used the techOrder option to force flash player and viewed in IE, Firefox, and Chrome. In all of them right clicking showed Flash was in use, and then even after moving mouse out, the control bar and controls never faded out.

So perhaps your CSS selectors off due to other competing CSS on your page, or perhaps you are embedding player in some other way that changes this, or perhaps you are using different versions than what I have linked in jsfiddle. You'll have to provide more info to get assistance.

JSFiddle contents:

HTML

<div class="container">
<video id="example_video_1" class="video-js vjs-default-skin"
  controls preload="auto" width="640" height="264"
  poster="http://video-js.zencoder.com/oceans-clip.png"
  data-setup='{"techOrder": ["flash"]}'>
 <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
 <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
 <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
 <p class="vjs-no-js">To view this video please enable JavaScript, and 
                      consider upgrading to a web browser that 
                      <a href="http://videojs.com/html5-video-support/" target="_blank">
                      supports HTML5 video</a></p>
</video>
</div>

CSS

.video-js .vjs-control-bar { bottom: -30px; }
.video-js .vjs-control-bar,.vjs-fade-in,.vjs-fade-out {
    visibility: visible !important;
    opacity: 1 !important;
    transition-duration: 0s !important;
    display: block !important;
}

External Files

Video.js Force Flash Controls Display

1 Answers