How to change layout of controls in video-js

问题

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.

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).

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

[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.]

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

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.

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.

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.)

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

回答1:

Ah...no javascript is needed at all.

Just a few lines of 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>

See: https://github.com/videojs/video.js/issues/2507

来源：https://stackoverflow.com/questions/41808513/how-to-change-layout-of-controls-in-video-js

标签

javascript

html5-video

video.js