Автор

02 04.2013
Видео-проигрыватель для сайта

Видео-проигрыватель для сайта


 

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

 

ДЕМО
ИСХОДНИКИ

 

В этом уроке мы создадим видеоплеер из набора элементов пользовательского интерфейса «Impressionist UI» Владимира Кудинова. Для оформления мы будем использовать CSS3, а для реализации функциональности — MediaElement.jsMediaElement.js это HTML5 аудио и видео плеер, который также работает в старых браузерах имитируя MediaElement HTML5 API с помощью Flash и Silverlight.


Для начала вам нужно скачать "MediaElement.js" сценарий и распаковать его. Из папки "build" нам нужны три файла:

  • flashmediaelement.swf
  • mediaelement-and-player.min.js
  • silverlightmediaelement.xap

 

Шаг 1. HTML

Для разметки нам нужно сделать ссылку на библиотеку JQuery. Затем добавить к ссылке "mediaelement-and-player.min.js" скрипт и добавить файл CSS. Все ссылки на эти три файла должны быть внутри:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/mediaelement-and-player.min.js"></script>

 

Чтобы создать видео плеер нужно только добавить новый HTML5 тег — видео. Затем мы добавим некоторые атрибуты для этого тега: ширина и высота видео и «обложки». Обложку изображения, можно показать перед началом видео, пока пользователь не нажмет на кнопку воспроизведения.

<video width="640" height="267" poster="media/cars.png">
 <source src="media/cars.mp4" type="video/mp4">
</video>

 

Теперь нам нужно добавить следующий код для управляющих кнопок и задать некоторые настройки:

  • alwaysShowControls – всегда показывать кнопки управления или только при наведении курсора
  • videoVolume – ползунок громкости
  • features: ['playpause','progress','volume','fullscreen'] – кнопки управления видео

«MediaElement.js» документация по дополнительным настройкам:

<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
 $('video').mediaelementplayer({
 alwaysShowControls: true,
 videoVolume: 'horizontal',
 features: ['playpause','progress','volume','fullscreen']
 });
});
// ]]></script>

 

Шаг 2. CSS

Давайте начнем с добавления некоторых стилей для элементов, которые мы будем использовать.

.mejs-inner,
.mejs-inner div,
.mejs-inner a,
.mejs-inner span,
.mejs-inner button,
.mejs-inner img {
 margin: 0;
 padding: 0;
 border: none;
 outline: none;
}

 

Затем мы добавим общий стиль для блока с видео. Все CSS свойства мы используем для создания разметки видео блока. Это не создаст особых стилей для самого видео, это только для того что бы разместить все элементы на нужное место.

.mejs-container {
 position: relative;
 background: #000000;
}

.mejs-inner {
 position: relative;
 width: inherit;
 height: inherit;
}

.me-plugin { position: absolute; }

.mejs-container-fullscreen .mejs-mediaelement,
.mejs-container-fullscreen video,
.mejs-embed,
.mejs-embed body,
.mejs-mediaelement {
 width: 100%;
 height: 100%;
}

.mejs-embed,
.mejs-embed body {
 margin: 0;
 padding: 0;
 overflow: hidden;
}

.mejs-container-fullscreen {
 position: fixed;
 left: 0;
 top: 0;
 right: 0;
 bottom: 0;
 overflow: hidden;
 z-index: 1000;
}

.mejs-background,
.mejs-mediaelement,
.mejs-poster,
.mejs-overlay {
 position: absolute;
 top: 0;
 left: 0;
}

.mejs-poster img { display: block; }

 

Давайте добавим большую кнопку воспроизведения в центре видео блока.

.mejs-overlay-play { cursor: pointer; }
.mejs-inner .mejs-overlay-button {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 50px;
 height: 50px;
 margin: -25px 0 0 -25px;
 background: url(../img/play.png) no-repeat;
}

 

Теперь мы будем использовать стиль для настройки положения блока с кнопками управления. Мы будем позиционировать его снизу, зададим ему 34px в высоту и добавим цвет фона. Лучше использовать RGBA, чтобы сделать фон прозрачным, но RGBA не поддерживается в старых браузерах, поэтому мы также добавим RGB. Затем мы добавим несколько кнопок с общим стилем и спрайт изображение.

.mejs-container .mejs-controls {
 position: absolute;
 width: 100%;
 height: 34px;
 left: 0;
 bottom: 0;
 background: rgb(0,0,0);
 background: rgba(0,0,0, .7);
}

.mejs-controls .mejs-button button {
 display: block;
 cursor: pointer;
 width: 16px;
 height: 16px;
 background: transparent url(../img/controls.png);
}

 

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

.mejs-controls div.mejs-playpause-button {
 position: absolute;
 top: 12px;
 left: 15px;
}

.mejs-controls .mejs-play button,
.mejs-controls .mejs-pause button {
 width: 12px;
 height: 12px;
 background-position: 0 0;
}

.mejs-controls .mejs-pause button { background-position: 0 -12px; }

.mejs-controls div.mejs-volume-button {
 position: absolute;
 top: 12px;
 left: 45px;
}

.mejs-controls .mejs-mute button,
.mejs-controls .mejs-unmute button {
 width: 14px;
 height: 12px;
 background-position: -12px 0;
}

.mejs-controls .mejs-unmute button { background-position: -12px -12px; }

.mejs-controls div.mejs-fullscreen-button {
 position: absolute;
 top: 7px;
 right: 7px;
}

.mejs-controls .mejs-fullscreen-button button,
.mejs-controls .mejs-unfullscreen button {
 width: 27px;
 height: 22px;
 background-position: -26px 0;
}
.mejs-controls .mejs-unfullscreen button { background-position: -26px -22px; }

 

Зададим стиль для ползунка громкости, изменим его положение, а затем добавим значения ширины и высоты, с закруглёнными углами.

.mejs-controls div.mejs-horizontal-volume-slider {
 position: absolute;
 cursor: pointer;
 top: 15px;
 left: 65px;
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
 width: 60px;
 background: #d6d6d6;
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
 position: absolute;
 width: 0;
 top: 0;
 left: 0;
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
 height: 4px;

 -webkit-border-radius: 2px;
 -moz-border-radius: 2px;
 border-radius: 2px;
}

 

Для индикатора просмотра мы применим общий стиль. Так же нужно позиционировать его на верхней части блока управления, добавить цвет фона для каждого состояния (полная шкала и время для загрузки). Установим ширину 0, и она будет автоматически обновляться при загрузке фильма.

.mejs-controls div.mejs-time-rail {
 position: absolute;
 width: 100%;
 left: 0;
 top: -10px;
}

.mejs-controls .mejs-time-rail span {
 position: absolute;
 display: block;
 cursor: pointer;
 width: 100%;
 height: 10px;
 top: 0;
 left: 0;
}

.mejs-controls .mejs-time-rail .mejs-time-total {
 background: rgb(152,152,152);
 background: rgba(152,152,152, .5);
}

.mejs-controls .mejs-time-rail .mejs-time-loaded {
 background: rgb(0,0,0);
 background: rgba(0,0,0, .3);
}

.mejs-controls .mejs-time-rail .mejs-time-current { width: 0; }

 

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

.mejs-controls .mejs-time-rail .mejs-time-handle {
 position: absolute;
 cursor: pointer;
 width: 16px;
 height: 18px;
 top: -3px;
 background: url(../img/handle.png);
}

.mejs-controls .mejs-time-rail .mejs-time-float {
 position: absolute;
 display: none;
 width: 33px;
 height: 23px;
 top: -26px;
 margin-left: -17px;
 background: url(../img/tooltip.png);
}

.mejs-controls .mejs-time-rail .mejs-time-float-current {
 position: absolute;
 display: block;
 left: 0;
 top: 4px;

 font-family: Helvetica, Arial, sans-serif;
 font-size: 10px;
 font-weight: bold;
 color: #666666;
 text-align: center;
}
.mejs-controls .mejs-time-rail .mejs-time-float-corner { display: none; }

 

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

.mejs-controls .mejs-time-rail .mejs-time-current,
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
 background: #82d344;
 background: -webkit-linear-gradient(top, #82d344 0%, #51af34 100%);
 background: -moz-linear-gradient(top, #82d344 0%, #51af34 100%);
 background: -o-linear-gradient(top, #82d344 0%, #51af34 100%);
 background: -ms-linear-gradient(top, #82d344 0%, #51af34 100%);
 background: linear-gradient(top, #82d344 0%, #51af34 100%);
}

 

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

30 06.2016
Видео-проигрыватель для сайта

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


05 04.2013
Видео-проигрыватель для сайта

Как известно визуальное оформление продукта влияет на его спрос. Точнее чем удобнее пользователю работать с интерфейсом, тем возрастает интерес к ресурсу. Многие веб-интерфейсы включают в себя динамические переключатели вида. На странице продукции или в архиве блога вы наверняка встречали кнопки, предназначенные для переключения вида разметки между списком или небольшой сеткой. В нашем сегодняшнем посте мы рассмотрим разработку простенького примера при помощи основных параметров CSS и некоторых команд jQuery.


05 04.2013
Видео-проигрыватель для сайта

Мультимедийные сайты широко заполонили просторы интернета, люди хотят делиться впечатлениями, изображениями и видео-файлами. Зачастую на фотосайтах или порталах можно заметить ротаторы контента, которые помогают сэкономить место на ресурсе. Ротатор весьма удобный элемент для сайта, ведь в него можно запихнуть все что душа пожелает, при этом сохранить уйму места на сайте. В данном уроке мы рассмотрим как создать замечательный автоматический ротатор контента для сайта с помощью jQuery.


27 04.2013
Видео-проигрыватель для сайта

Эффект параллакса стал весьма интересовать веб-разработчиков, своей оригинальностью и заинтересованностью пользователей, в данном уроке мы рассмотрим как создать весьма привлекательный слайдер для сайта с помощью CSS3 и jQuery. С помощью анимаций CSS мы можем контролировать каждый элемент на слайде и создавать поразительные эффекты за счет их взаимного смещения. Слайдер будет содержать несколько слайдов, которые будут смещаться, создавая интересный эффект. В демонстрации будет использоваться автоматическая и ручная прокрутка..


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close