Как создать плеер для сайта на jQuery (css плеер)

playerСегодня мы рассмотрим урок по созданию  плеера для сайта на jQuery. Его особенностью является то, что его внешний вид определяется CSS-стилями, и может быть легко изменен в соответствии с дизайном Вашего сайта. Что безусловный плюс. Для начала приведём рабочий вариант — демо, а также архив со всеми исходниками. Расмотрен самый простой вариант плеера для того чтобы вы быстрее разобрались в коде. И так начнем.

Подключим фреймворк jQuery и плагин jquery.jplayer к нашему документу, прописав следующий код между тегами <head>:

[source]


[/source]

Далее вставим следующий скрипт:

[source]

[/source]

В отдельный файл CSS или между тегами <head> пропишем следующие стили (параметры этих стилей вы можете изменять по своему желанию):

[source]
#player_container {
POSITION: relative; BACKGROUND-COLOR: #00468C; WIDTH: 90px; HEIGHT: 30px; border: 2px solid #CCCCCC
}
#player_container UL#player_controls {
PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
#player_container UL#player_controls LI {
TEXT-INDENT: -9999px; OVERFLOW: hidden
}
#player_play {
POSITION: absolute; WIDTH: 24px; DISPLAY: block; HEIGHT: 24px; TOP: 3px; CURSOR: pointer; LEFT: 15px
}
#player_pause {
POSITION: absolute; WIDTH: 24px; DISPLAY: block; HEIGHT: 24px; TOP: 3px; CURSOR: pointer; LEFT: 15px
}
#player_play {
BACKGROUND: url(images/play.png) no-repeat;
}
.different_prefix_example_hover#player_play {
BACKGROUND: url(images/play2.png) no-repeat;
}
#player_pause {
BACKGROUND: url(images/pause.png) no-repeat;
}
.different_prefix_example_hover#player_pause {
BACKGROUND: url(images/pause2.png) no-repeat;
}
#player_stop {
POSITION: absolute; WIDTH: 22px; BACKGROUND: url(images/stop.png) no-repeat; HEIGHT: 22px; TOP: 4px; CURSOR: pointer; LEFT: 52px
}
.different_prefix_example_hover#player_stop {
BACKGROUND: url(images/stop2.png) no-repeat;
}
[/source]

В нужном нам месте вставим блок самого плеера:

[source]

Пример плеера на jQuery (css плеер)

[/source]

На этом все ждите новых уроков.