Опубликовано:
Video.js - делаем видео адаптивным
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. Не всегда работает на телефонах видеоконтент. Если разбираетесь и сможете помочь пишите на почту.