Кнопка воспроизведения по центру VideoJS

Я думал, что поделюсь куском кода, который может кому-то помочь. Это функция, которая центрирует кнопку воспроизведения внутри проигрывателя video-js, и работает для меня. Вам просто нужно вызвать его на событие паузы и когда игрок инициализирован и не будет автовоспроизведен.

Наслаждайтесь!

function CenterPlayBT() {
   var playBT = $(".vjs-big-play-button");
   playBT.css({
      left:( (playBT.parent().outerWidth()-playBT.outerWidth())/2 )+"px",
      top:( (playBT.parent().outerHeight()-playBT.outerHeight())/2 )+"px"
   });
}

Ответы

Ответ 1

Вы можете попробовать играть на videojs.com или как @misterben, сказанное выше: "просто добавьте класс vjs-big-play-centered в элемент видео"

<video id="my_video" class="video-js vjs-default-skin vjs-big-play-centered" width="640" height="360"... ></video>

Игровая площадка: https://codepen.io/heff/pen/EarCt

Для версии SCSS вы можете использовать

$center-big-play-button: true;

Ответ 2

Создайте видео-js-custom.css после:

<link href="http://vjs.zencdn.net/5.9.2/video-js.css" rel="stylesheet">
<link href="link-to-custom-css/video-js-custom.css" rel="stylesheet">

Добавление видео-js-custom.css:

.video-js .vjs-big-play-button {
    left: 40% !important;
    top: 40% !important;
    width: 20%;
    height: 20%;
}

.video-js .vjs-play-control:before {
    top:20% !important;
    content: '\f101';
    font-size: 48px;
}

Ответ 3

Простой способ:

http://designer.videojs.com - внизу меньше всего добавить:

.vjs-default-skin .vjs-big-play-button {
  margin-left: [email protected]/2;
  margin-top: [email protected]/2;
  left: 50%;
  top: 50%;
}

Ответ 4

Добавить пользовательский CSS в ваш код

.vjs-big-play-button {
    margin-top: 20%;
    margin-left: 40%;
    width: 70px !important;
    height: 70px !important;
}

Соответственно отрегулируйте ширину и высоту.

Ответ 5

Я использую "персональный проигрыватель", который использует video.js для доставки решения HTML5, но у меня есть проблема с нажатием кнопки кнопки воспроизведения кнопки на игровых устройствах iOS. Сообщенная проблема и поддержка не могут прийти с решением. Они подтвердили проблему. Я думал поделиться своим решением, которое могло бы помочь кому-то. Решение было простым: уменьшить размер шрифта! Помимо "font-size" есть унаследованное свойство "line-height", которое может также потребовать корректировки. Эти два свойства увеличивают родительский контейнер, а несоосность происходит, если родительский контейнер не настроен на относительный или контейнер видеопроигрывателя настроен на отзывчивость (ширина: 100%, высота: 100%)

Итак, решение CSS помогло мне:

.video-js .vjs-limelight-big-play{ 
      font-size:100px!important /*or less */
}

Или даже лучше переключиться с PX на EM, что поможет в мобильных устройствах (проблема с iOS с центрированием кнопки воспроизведения тоже)

.video-js .vjs-limelight-big-play{ 
      font-size:10em!important /*or less depending on your design*/
}