Как изменить компоновку элементов управления в video-js

Question

Я только начал использовать (пытаюсь использовать) видео-js около недели назад, для моих видеопроектов HTML5.

Не слишком долго было осознавать, что мне НЕ нравится по умолчанию расположение вещей в нижней части плеера.

В частности, мне не нравится тот факт, что PlayProgressBar автоматически сокращает вправо, чтобы открыть регулятор громкости. (Плохой выбор для ПО УМОЛЧАНИЮ, на мой взгляд).

Что для меня имеет смысл, так это расположение с PlayProgressBar выше, и ControlBar под ним. Как показано здесь: https://docs.brightcove.com/en/perform/brightcove-player/guides/customize-appearance.html#BCLreferences

[Выбор в настоящее время, сложно в эксплуатации по умолчанию ControlBar может быть так, что это было не так высок, но так как он втягивается большую часть времени, его высота не действительно проблема.]

Кроме того, я предпочитаю НЕ иметь минус-значный «остаток TimeDisplay» и будет гораздо скорее иметь «currentTimeDisplay», «timeDivider», «durationDisplay», как показано на рисунке.

Примечание: Мне не нужно изменять стиль/цвета по умолчанию, поэтому я НЕ НУЖНО нужен какой-либо связанный CSS. Все, что я ищу сейчас, это добиться изменений геометрии макета .

Я немного поиграл, пытаясь добавить/удалить несколько вещей из controlBar, через параметр настройки данных тега видео, но не смог заставить его работать.

Но, я думаю, что лучшее (только?) Место для изменения макета GEOMETRY будет в начальном javascript. (Но, если геометрию макета можно контролировать в параметре данных настройки, пожалуйста, укажите это.)

Итак, есть человек слушает, кто владеет видео-JS, которые могли бы предоставить некоторую простую начиная JavaScript для добиться такого макета?

Answer 1

А ... нет javascript вообще.

Всего несколько строк CSS.

Так, в заголовке, ниже ссылку, которая включает в себя CSS для видео-JS, добавьте:

<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