如何在video-js中更改控件的布局 [英] How to change layout of controls in video-js

问题描述

大约一周前，我刚刚开始使用(尝试使用)video-js， 用于我的HTML5视频项目.

I just started using (trying to use) video-js about a week ago, for my HTML5 video projects.

花了很长时间才意识到我不喜欢默认值 布置在播放器底部的东西.

It didn't take too long to realize that I do NOT like the default layout of things at the bottom of the player.

具体来说，我不喜欢PlayProgressBar自动缩短的事实 本身在右边，以发现音量控制. (错误的选择 我认为是默认情况.

Specifically, I don't like the fact that the PlayProgressBar auto-shortens itself to the right, to uncover the volume-control. (Bad choice for a DEFAULT, in my opinion).

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

What makes much more sense to me is a layout with the PlayProgressBar above, and the ControlBar underneath it. As shown here: https://docs.brightcove.com/en/perform/brightcove-player/guides/customize-appearance.html#BCLreferences

[目前选择的，操作起来很麻烦的默认controlBar可能不是那么高，但由于它在大多数时间都处于缩回状态， 身高并不是真正的问题.]

[The choice for the present, tricky-to-operate default controlBar could be so that it wasn't so tall, but since it is retracted most of the time, its height is not really an issue.]

此外，我更喜欢没有负值的"remainingTimeDisplay" 而宁愿具有此处所示的"currentTimeDisplay"，"timeDivider"，"durationDisplay".

Also, I much prefer NOT having the minus-valued 'remainingTimeDisplay' and would much rather have the 'currentTimeDisplay', 'timeDivider', 'durationDisplay' as shown there.

注意:我不需要更改默认的样式/颜色，所以我不需要 需要任何相关的CSS.我现在正在寻找的是实现 布局几何形状发生了变化.

Note: I do NOT need to alter style/colors from defaults, so I do NOT need any related CSS. All I'm seeking right now is to achieve the layout geometry changes.

我尝试了一些操作，试图从ControlBar添加/删除一些东西， 通过video标签的data-setup参数，但无法正常工作.

I played around a bit trying to add / remove a few things from the controlBar, via the data-setup parameter of the video tag, but couldn't get that to work.

但是，我认为最好的(唯一的?)更改布局几何"的位置是 在最初的javascript中. (但是，如果可以控制布局几何 在data-setup参数中，请指明.)

But, I think the best (only?) place to alter the layout GEOMETRY would be in the initial javascript. (But, if layout geometry CAN be controlled in the data-setup parameter, please indicate that.)

那么，有没有听过流利视频js的人，这可能 提供一些简单的开始javascript来实现这种布局?

So, is there a person listening who is fluent in video-js, that could provide some simple starting javascript to achieve such a layout?

推荐答案

啊...根本不需要JavaScript.

Ah...no javascript is needed at all.

仅几行CSS.

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

So, in the header, below the link that includes the CSS for video-js, add:

<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中更改控件的布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！