添加选项 video.js

Question

我希望能够配置 controlsBelow 和 controlsHiding（始终在下方显示控件），但我发现能够做到这一点的唯一方法是使用 VideoJS.setupAllWhenReady()（这似乎是以前版本的 VJS），而不是像当前文档（v4.12，在 post 时）所说的那样使用 videojs()。文档的选项页面中没有提到这两个选项中的任何一个，所以它可能不再受支持了吗？

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

在相当彻底地通读了代码之后，我没有看到我担心的这些选项中的任何一个可用（我只是希望有人可能知道我不知道的事情）。我已经将控制栏设置为始终显示（在用户短暂不活动后不会淡出，这是默认行为）并通过 CSS 显示在视频下方而不是视频上方，但是在全屏模式下，控制栏会滑到浏览器的视口下方 (eek)。我最终添加了一个 :not() 选择器以在全屏模式下保持默认行为。这对我有用。

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>

添加选项 video.js

Adding options to video.js

video.js