Категория:
Опубликовано:

Video.js - делаем видео адаптивным

Video.js Fluid Width

Video.js - популярная библиотека для вывода HTML5-видео.

К сожалению, имеет некоторые проблемы с адаптивностью - исправляем.

1. Подключаем либу к странице, прописав в head:

<link href="http://vjs.zencdn.net/5.10.8/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/5.10.8/video.js"></script>
<!-- If you'd like to support IE8 -->
<script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>

2. Добавляем на страницу видео - ( ! без указаний ширины и высоты )

<video id="my-video" class="video-js vjs-default-skin" controls preload="none" poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
  <source src="MY_VIDEO.mp4" type='video/mp4'>
  <source src="MY_VIDEO.webm" type='video/webm'>
</video>

3. Добавляем свой небольшой jQuery-скрипт, который будет отрабатывать при изменении ширины экрана:

(function ($) {
  // Добавляем переменные
  var myPlayer = $('#my-video'),  // Наше видео
      aspectRatio = 9 / 16;  // Сечение плеера (коэффициент соотношения сторон)

  // Функция, меняющая соотношение
  function resizeVideoJS() {
    var myPlayerWidth = myPlayer.parent().outerWidth(), // Требуемая ширина
        myPlayerHeight = myPlayerWidth * aspectRatio; // Требуемая высота

    myPlayer.width(myPlayerWidth).height(myPlayerHeight); // Устанавливаем размеры
  }

  // При загрузке видео
  myPlayer.ready(function () {
    resizeVideoJS(); // Инициируем функцию
  });

  // При изменении ширины окна
  $(window).resize(function () {
    resizeVideoJS(); // Инициируем функцию
  });
})(jQuery);

Готово.

Если у Вас возникли вопросы, замечания, предложения или просто благодарность - пишите в комментариях.
Делитесь полезными материалами в социальных сетях.

Комментарии

Добрый день, нужна консультация по Video.js. Не всегда работает на телефонах видеоконтент. Если разбираетесь и сможете помочь пишите на почту.