Адаптивный видеоплеер · CSSplay-er

Адаптивный видеоплеер CSSplay-er

Адаптивный видеоплеер для сайта CSSplay-er подстраивается под любое разрешение больших экранов и дисплеев мобильных устройств, поддерживает плейлист и работает во всех известных браузерах.

Описание видеоплеера CSSplay-er

Видеоплеер HTML5 с адаптивными свойствами оснащён постером заставкой, элементами управления стоп, пауза, отключение звука, регулировкой громкости и функцией fullscreen для разворачивания видео на весь экран. Возможно одновременное размещение нескольких плееров на одной странице имеющих различную функциональную компановку. Видеоплеер работает с плейлистом и Вы сможете укомплектовать его списком воспроизведения. Протестирован в браузерах IE6 и выше, Firefox, Opera, Safari, Chrome, iOS, Android и Windows всех версий. Предлагаются 3 варианта видеоплееров с разным набором функционала.

Установка видеоплеера

Для установки Вам понадобится подключить файл стилей и скрипт управления плеером в зону <head> страниц сайта, на которых будет подключен видеоплеер.

<style type="text/css" href="//atmpl.ru/design/adaptive-video/2014/CSSplay-er/cssplay-er.css" link="styleshet">
<script src="//atmpl.ru/design/adaptive-video/2014/CSSplay-er/cssplay-er.min.js"></script>

Настройка плеера CSSplay-er

По умолчанию видеоплеер займёт всю свободную ширину родительского элемента, но Вы можете указать максимальный размер, используя атрибуты ширины width="ЧИСЛО" в коде самого плеера. По умолчанию видеоплеер расположится по центру элемента в зоне которого находится, чтобы сделать доступным изменение положения, измените значение свойству margin:10px auto; в селекторах .videoOne, .videoTwo, .videoThree.


<div class="cssplay-er videoThree play-pause" aria-haspopup="true">
<video class="cssplay-video" width="450" controls="controls" preload="auto" poster="//atmpl.ru/design/adaptive-video/2014/CSSplay-er/mu.jpg">
<source src="//www.cssplay.co.uk/menu/video/mu.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="//www.cssplay.co.uk/menu/video/mu.ogv" type='video/ogg; codecs="theora, vorbis"' />
<source src="//www.cssplay.co.uk/menu/video/mu.webm" type='video/webm; codecs="vp8, vorbis"' />
<object type="application/x-shockwave-flash" width="450" data="//atmpl.ru/design/adaptive-video/2014/CSSplay-er/player.swf">
<param name="movie" value="//atmpl.ru/design/adaptive-video/2014/CSSplay-er/player.swf" />
<param name="flashvars" value="controlbar=over&amp;image=//atmpl.ru/design/adaptive-video/2014/CSSplay-er/mu.jpg&amp;file=//atmpl.ru/design/adaptive-video/2014/CSSplay-er/mu.mp4" />
</object>
</video>
</div>

Стандартный видеоплеер

Стандартный тип видеоплеера имеет функции включения, выключения, отключения звука, регулировку громкости и разворота на весь экран, возможно дополнение постером заставкой.


<div class="cssplay-er videoOne" aria-haspopup="true">
<video class="cssplay-video" controls="controls" preload="auto" poster="//atmpl.ru/design/adaptive-video/2014/CSSplay-er/the-boxtrolls.jpg">
<source src="//www.cssplay.co.uk/menu/video/the-boxtrolls.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="//www.cssplay.co.uk/menu/video/the-boxtrolls.ogv" type='video/ogg; codecs="theora, vorbis"' />
<source src="//www.cssplay.co.uk/menu/video/the-boxtrolls.webm" type='video/webm; codecs="vp8, vorbis"' />
<object type="application/x-shockwave-flash" data="//atmpl.ru/design/adaptive-video/2014/CSSplay-er/player.swf">
<param name="movie" value="//atmpl.ru/design/adaptive-video/2014/CSSplay-er/player.swf" />
<param name="flashvars" value="controlbar=over&amp;image=//atmpl.ru/design/adaptive-video/2014/CSSplay-er/the-boxtrolls.jpg&amp;file=//atmpl.ru/design/adaptive-video/2014/CSSplay-er/the-boxtrolls.mp4" />
</object>
</video>
</div>

Видеоплеер с плейлистом

Дополнительно видеоплеер может содержать плейлист, кнопки управления списком воспроизведения располагаются под плеером.

Break The Ice

Iron Compass

Many Adventures

Shamed


<div class="cssplay-er videoTwo" aria-haspopup="true">
<video id="movie" class="cssplay-video" controls="controls" preload="auto" poster="//atmpl.ru/design/adaptive-video/2014/CSSplay-er/break-the-ice.jpg">
<source src="//www.cssplay.co.uk/menu/video/planes-break-the-ice.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="//www.cssplay.co.uk/menu/video/planes-break-the-ice.ogv" type='video/ogg; codecs="theora, vorbis"' />
<source src="//www.cssplay.co.uk/menu/video/planes-break-the-ice.webm" type='video/webm; codecs="vp8, vorbis"' />
<object type="application/x-shockwave-flash" data="//atmpl.ru/design/adaptive-video/2014/CSSplay-er/player.swf">
<param name="movie" value="//atmpl.ru/design/adaptive-video/2014/CSSplay-er/player.swf" />
<param name="flashvars" value="controlbar=over&amp;image=video/break-the-ice.jpg&amp;file=//atmpl.ru/design/adaptive-video/2014/CSSplay-erplanes-break-the-ice.mp4" />
</object>
</video>
</div>
<p class="playlist chosen" data-id="#movie" data-video="//www.cssplay.co.uk/menu/video/planes-break-the-ice" data-poster="//atmpl.ru/design/adaptive-video/2014/CSSplay-er/break-the-ice.jpg">Break The Ice</p>
<p class="playlist" data-id="#movie" data-video="//www.cssplay.co.uk/menu/video/planes-iron-compass" data-poster="//atmpl.ru/design/adaptive-video/2014/CSSplay-er/iron-compass.jpg">Iron Compass</p>
<p class="playlist" data-id="#movie" data-video="//www.cssplay.co.uk/menu/video/planes-many-adventures" data-poster="//atmpl.ru/design/adaptive-video/2014/CSSplay-er/many-adventures.jpg">Many Adventures</p>
<p class="playlist" data-id="#movie" data-video="//www.cssplay.co.uk/menu/video/planes-shamed" data-poster="//atmpl.ru/design/adaptive-video/2014/CSSplay-er/shamed.jpg">Shamed</p>

Видеоплеер минимальный

В минимальном варианте видеоплеера присутствуют только кнопки запуска и остановки воспроизведения видео.


<div class="cssplay-er videoThree play-pause" aria-haspopup="true">
<video class="cssplay-video" width="450" controls="controls" preload="auto" poster="//atmpl.ru/design/adaptive-video/2014/CSSplay-er/mu.jpg">
<source src="//www.cssplay.co.uk/menu/video/mu.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="//www.cssplay.co.uk/menu/video/mu.ogv" type='video/ogg; codecs="theora, vorbis"' />
<source src="//www.cssplay.co.uk/menu/video/mu.webm" type='video/webm; codecs="vp8, vorbis"' />
<object type="application/x-shockwave-flash" width="450" data="//atmpl.ru/design/adaptive-video/2014/CSSplay-er/player.swf">
<param name="movie" value="//atmpl.ru/design/adaptive-video/2014/CSSplay-er/player.swf" />
<param name="flashvars" value="controlbar=over&amp;image=//atmpl.ru/design/adaptive-video/2014/CSSplay-er/mu.jpg&amp;file=//atmpl.ru/design/adaptive-video/2014/CSSplay-er/mu.mp4" />
</object>
</video>
</div>
Видеоплеер нормально работает, но пришлось внести небольшие изменения в файл стилей CSS, в нём была допущена ошибка и неверно интерпретирована способность к адаптации размерам.

Демо испытание видеоплеера CSSplay-er

Испытайте видеоплеер самостоятельно, для активации демо, нажмите на кнопку выполнения в поле кода.

Тест на адаптивность видеоплеера CSSplay-er

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

//atmpl.ru/design/adaptive-video/2014/CSSplay-er/test-cssplay-er.html
Тест на адаптивность видеоплеера CSSplay-er

Подробности видеоплеера CSSplay-er

Авторская ссылка
//www.cssplay.co.uk/menu/cssplay-er.html
Версия видеоплеера CSSplay-er
v1.0

Рейтинг: 5.0/5 из 2



Добавлено Автор Ник Источник Просмотров Комментариев Теги
10-11-2014 Михаил Меренков aTmpl © 1760 0 Video, видео, адаптивный, Adaptive, Player, responsive, Плеер