Помогите разобраться с настройкой Video.js под нужды проекта

Добрый день!
Помогите пожалуйста решить ряд задач.
Необходимо поставить на страничку 2 и более небольших плеера
Я решил воспользоваться библиотекой Video.js
Скачав её к себе на компьютер.

Всё хорошо, всё работает. Но есть ряд задач.

  1. Это расположить кнопку старта по центру.
    проблема в том что у кнопки нет уникального ID на странице а костыль с сылкой через название class работает только в том случае если проигрыватель один и его подмножество имён уникально.
    Как вы наверное уже догадались форматы видосиков по шерене и высоте разные именно поэтому размещение кнопки по центру вызывает проблему.
    Я полез в библиотеку в надежде что разберусь сам но там все элементы управления собираются через “.prototype”
    Я им никогда не пользовался, поэтому требуется помощь.
    Да и сам код далёк от моего понимания :frowning:
    Я так сложно не пишу. Конечно огромный поклон разработчикам video.js они реально молодци, так как работает всё идеально ни каких проблем с установкой всё предельно понятно без инструкции.
    Но хотелось бы наличие комментов по коду, так как откуда, что вытекает остаётся только догадываться из названий классов и функций.

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

  3. Простая костомизация.
    Мне хотелось бы чтобы задний фон был “transparent”
    При нажатии на область просмотра она не получала свойства “border-color” и не подсвечивала всю область клика белой рамкой.

  4. Вопрос уже к людям которые работали с Video.js
    Как настроить плеер чтобы при завершении видео обратно размещался постер и большая кнопка?
    Разумеется видео не на повторе.

Я понимаю что это довольно не тривиальные задачи поэтому готов заплатить если понадобиться.
Очень надеюсь на Ваше понимание.
Спасибо.

https://videojs.com/getting-started/#skinning

The player skin is completely built from HTML and CSS, including when Flash and other players like YouTube are used.

Skin changes can be as simple as centering the play button (you can just add the ‘vjs-big-play-centered’ class to your video tag), or as complex as creating entirely new layouts. We’ve built a codepen project where you can explore different changes.

А что за обработка?
Что в коде?
В DevTools есть ошибки в консоли?

В DevTools ошибок нет.
У нас в video.js есть формирование элемента

<button class="vjs-big-play-button"
              type="button"
              title="Play Video"
              aria-disabled="false"
              style="left: 280px; top: 152.5px;" (это я уже отцентровал)>
<span aria-hidden="true" class="vjs-icon-placeholder"></span>
<span class="vjs-control-text" aria-live="polite">Play Video</span>
</button>

Внутри кода я искал где присваивается class=vjs-big-play-button
Нашёл:

n.prototype.buildCSSClass = function () {
                return "vjs-big-play-button";
            }

Мне бы понять как происходит вызов методов для того чтобы добавить атрибут ID
В идеале было бы не плохо ещё разобраться откуда берётся значение id на video элементе
Так как изначально там стоит “my-player2” после загрузки получается “my-player2_html5_api”
Было бы совсем хорошо если бы на большой кнопке было id=“my-player2_BigButton”

Так не надо так глубоко лезть, класс видимо просто у <video> на своей странице добавить. Или как плееры добавляются?

Alex
вопрос: можно ли весь задний фон сделать прозрачным?

.......
у этого элемента задний фон исключительно чёрный ег прозрачным сделать можно?

Фон чего? Его вроде и так нет.
Рамки видео если не подходит соотношение сторон? По-моему это от самого HTML <video>, а не от библиотеки.

Тысяча чертей.
Вы совершенно правы.
Костыль в FireFox
При этом он как любом элементе на который кликабилен, после нажатия остаётся какая-то рамка чёрно белая.
Что делать?

Точнее наоборот затык в Chrome движке.
В FireFox рамок нет

Подскажите.
Если отключить #form-controls-refresh
то всё равно рисует какую-то синюю хрень вокруг кликнутого элемента, но по крайне мере не так заметно.

Это можно поменять как-нибудь с помощью javascript?
#form-controls-refresh disabled

хм, тут наоборот жалуются :upside_down_face:


Так вроде бы работает

.video-js video {
  outline: none;
}

https://jsfiddle.net/AlexP11223/sq24coLp/13/

Не знаю хорошее ли это решение, может по ссылке выше или тут что-то лучше предложено. Но там вроде бы в основном про фокус при переключении клавиатурой между элементами речь, если это не важно, то наверно сойдет. :soidet:

Это скорее всего просто результат сборки, транспиляции Babel’ем в старую версию JS для добавления совместимости со старыми браузерами.
Исходники тут: https://github.com/videojs/video.js
Например кнопка: https://github.com/videojs/video.js/blob/main/src/js/big-play-button.js

Спасибо огромное.
Сработало.