Adding options to video.js - video.js

Question

I'd like to be able to configure controlsBelow and controlsHiding (always show controls below), but the only way I found to be able to do that is with VideoJS.setupAllWhenReady() (which appears to be a previous version of VJS), not with videojs() as the current docs (v4.12, at the time of this post) say to use. Nothing in the doc's option page mentions either of these options, so perhaps it's not supported anymore?
var setup = {
"techOrder" : ['html5', 'flash'],
"controls": true,
"preload": "auto",
"children": {
"controlBar": {
"children": {
"volumeMenuButton": true,
"muteToggle": false,
"volumeControl": false // displays volume control bar atop button
}
}
}
};
var player = videojs('player', setup, function(){
var myPlayer = this;
myPlayer.play();
});
<link href="//vjs.zencdn.net/4.12/video-js.css" rel="stylesheet"/>
<script src="//vjs.zencdn.net/4.12/video.js"></script>
<div class="video-js-box">
<video id="player" class="video-js vjs-default-skin vjs-big-play-centered vjs-block-error" width="640" height="264" controls preload poster="http://video-js.zencoder.com/oceans-clip.png">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"' />
<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
<object class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash"
data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' />
<param name="bgcolor" value="#f30000">
<param name="wmode" value="opaque">
<!-- Image Fallback. Typically the same as the poster image. -->
<img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
title="No video playback capabilities." />
</object>
</video>
</div>

Answer 1

After pretty thoroughly reading through the code, I don't see either of these options being available as I feared (I was just hoping someone might know something I didn't). I had already set the control bar to always display (don't fade out after a brief period of user inactivity, as is the default behavior) and to display below the video rather than on top of it via CSS, but in fullscreen mode the control bar would slip beneath the browser's viewport (eek). I ended up adding a :not() selector to keep the default behavior in fullscreen mode. That'll work for me.
var setup = {
"techOrder" : ['html5', 'flash'],
"controls": true,
"preload": "auto",
"children": {
"controlBar": {
"children": {
"volumeMenuButton": true,
"muteToggle": false,
"volumeControl": false // displays volume control bar atop button
}
}
}
};
var player = videojs('player', setup, function(){
var myPlayer = this;
myPlayer.play();
});
/* force control bar to display at all times if not in fullscreen mode */
.vjs-default-skin:not(.vjs-fullscreen).vjs-has-started .vjs-control-bar {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* move under video if not in fullscreen (else it will disappear below the browser viewport */
.vjs-default-skin:not(.vjs-fullscreen) .vjs-control-bar {
bottom: -30px;
}
<link href="//vjs.zencdn.net/4.12/video-js.css" rel="stylesheet"/>
<script src="//vjs.zencdn.net/4.12/video.js"></script>
<div class="video-js-box">
<video id="player" class="video-js vjs-default-skin vjs-big-play-centered vjs-block-error" width="640" height="264" controls preload poster="http://video-js.zencoder.com/oceans-clip.png">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"' />
<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
<object class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash"
data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' />
<param name="bgcolor" value="#f30000">
<param name="wmode" value="opaque">
<!-- Image Fallback. Typically the same as the poster image. -->
<img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
title="No video playback capabilities." />
</object>
</video>
</div>