Question

一周前我刚开始使用（试图使用）video-js，对于我的HTML5视频项目。

不需要太长时间才能意识到我不喜欢默认设置播放器底部的东西布局。

具体来说，我不喜欢PlayProgressBar自动缩短的事实本身就在右边，揭开音量控制。（糟糕的选择在我看来，这是一个默认。

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

[目前，操作难以操作的默认控制栏的选择可能是因为它不是那么高，但由于它大部分时间都被收回，所以身高并不是真正的问题。]

另外，我更喜欢没有减值'remainingTimeDisplay' 并且更愿意在那里显示'currentTimeDisplay'，'timeDivider'，'durationDisplay'。

注意：我不需要改变默认值的样式/颜色，所以我没有需要任何相关的CSS。我现在所寻求的就是实现这一目标布局几何变化。

我玩了一下试图添加/删除controlBar中的一些东西，通过视频标签的数据设置参数，但无法使其正常工作。

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

那么，有没有一个人能够流利使用视频-js，那可以提供一些简单的启动javascript来实现这样的布局？

Answer 1

啊......根本不需要javascript。

只需几行CSS。

因此，在标题中，在包含视频-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

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

1 个答案: