Как создать видео-проигрыватель для сайта
На сайтах часто встречаются различные видео-файлы которые перенаправлены с крупных файловых менеджеров. С одной стороны это удобно, ведь вы экономите дисковое пространство на хостинге, но с другой стороны проигрыватель со стороннего сайта оставляет ссылки и рекламу на свой источник, тем самым вы бесплатно даете ему рекламу, это не совсем приятно. Но что делать, если хочется что-то собственное и пространства на хостинге хватает, тогда выход есть. Это создать самому уникальный проигрыватель, который станет узнаваем благодаря вашему ресурсу.
В этом уроке мы создадим видеоплеер из набора элементов пользовательского интерфейса «Impressionist UI» Владимира Кудинова. Для оформления мы будем использовать CSS3, а для реализации функциональности — MediaElement.js. MediaElement.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. Все ссылки на эти три файла должны быть внутри:
1 2 |
Как создать видео-проигрыватель для сайтаr<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 тег — видео. Затем мы добавим некоторые атрибуты для этого тега: ширина и высота видео и «обложки». Обложку изображения, можно показать перед началом видео, пока пользователь не нажмет на кнопку воспроизведения.
1 2 3 |
<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» документация по дополнительным настройкам:
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript">// <![CDATA[ $(document).ready(function() { $('video').mediaelementplayer({ alwaysShowControls: true, videoVolume: 'horizontal', features: ['playpause','progress','volume','fullscreen'] }); }); // ]]></script> |
Шаг 2. CSS
Давайте начнем с добавления некоторых стилей для элементов, которые мы будем использовать.
1 2 3 4 5 6 7 8 9 10 11 |
.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 свойства мы используем для создания разметки видео блока. Это не создаст особых стилей для самого видео, это только для того что бы разместить все элементы на нужное место.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
.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; } |
Давайте добавим большую кнопку воспроизведения в центре видео блока.
1 2 3 4 5 6 7 8 9 10 |
.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. Затем мы добавим несколько кнопок с общим стилем и спрайт изображение.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.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); } |
На этом этапе мы будем позиционировать кнопки в нужном месте. Сейчас нужно сделать: изменить позицию каждой кнопки на блоке управления, установить ширину и высоту каждой кнопки, и изменить положение фонового изображения.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
.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; } |
Зададим стиль для ползунка громкости, изменим его положение, а затем добавим значения ширины и высоты, с закруглёнными углами.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.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, и она будет автоматически обновляться при загрузке фильма.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
.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; } |
На этом этапе мы добавим маркер для шкалы просмотра и подсказки, которые будут показывать текущее время при наведении курсора мыши. Сейчас нам нужно задать им позицию, добавить фоновое изображение, установить ширину и высоту, и добавить некоторые стили необходимые для типографии.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
.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, который будет использоваться на шкале просмотра и регуляторе громкости.
1 2 3 4 5 6 7 8 9 |
.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%); } |
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Читайте также:
Опубликовал Cooper 14.07.2012 в 22:48, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |