如何更改 video-js 中控件的布局答案

【问题标题】：How to change layout of controls in video-js如何更改 video-js 中控件的布局
【发布时间】：2017-01-23 14:20:45
【问题描述】：

我大约一周前才开始使用（尝试使用）video-js，用于我的 HTML5 视频项目。

很快我就意识到我不喜欢默认设置播放器底部的东西布局。

具体来说，我不喜欢 PlayProgressBar 自动缩短的事实本身向右，以发现音量控制。（错误的选择我认为是默认值）。

对我来说更有意义的是上面带有 PlayProgressBar 的布局，和它下面的 ControlBar。如此处所示： https://docs.brightcove.com/en/perform/brightcove-player/guides/customize-appearance.html#BCLreferences

[目前的，难以操作的默认 controlBar 的选择可能是它不是那么高，但由于它大部分时间都是缩回的，它的身高不是问题。]

另外，我更喜欢没有负值的“remainingTimeDisplay” 并且宁愿有'currentTimeDisplay'、'timeDivider'、'durationDisplay'，如图所示。

注意：我不需要更改默认样式/颜色，所以我不需要需要任何相关的CSS。我现在所寻求的只是实现布局几何变化。

我尝试了一些尝试从 controlBar 添加/删除一些东西，通过 video 标签的 data-setup 参数，但无法使其工作。

但是，我认为更改布局 GEOMETRY 的最佳（唯一？）位置是在最初的 javascript 中。（但是，如果布局几何可以控制在data-setup参数中，请注明。）

那么，有没有一个精通video-js的人在听，那可以提供一些简单的启动javascript来实现这样的布局？

【问题讨论】：

标签： javascript html5-video video.js

【解决方案1】：

啊...根本不需要 javascript。

几行 CSS。

因此，在标题中，在包含 video-js 的 CSS 的链接下方，添加：

<style>
    .video-js .vjs-current-time { display: block; }
    .video-js .vjs-time-divider { display: block; }
    .video-js .vjs-duration { display: block; }
</style>

见：https://github.com/videojs/video.js/issues/2507

【讨论】：