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

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

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

<script type=text/javascript src="/jquery."></script>
<script type=text/javascript src="/jquery.jplayer."></script>

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

<script>$(document).ready(function(){
	$("#jquery_jplayer").jPlayer({
		ready: function () {
			$("#jquery_jplayer").change('example.mp3');
		},
		cssPrefix: "different_prefix_example"
	});
	$("#jquery_jplayer").jPlayerId("play", "player_play");
	$("#jquery_jplayer").jPlayerId("pause", "player_pause");
	$("#jquery_jplayer").jPlayerId("stop", "player_stop");
});
</script>
В отдельный файл CSS или между тегами <head> пропишем следующие стили (параметры этих стилей вы можете изменять по своему желанию):
#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;
}

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

<h1>Пример плеера на jQuery (css плеер)</h1>
<div id=jquery_jplayer></div>
<div id=player_container>
<ul id=player_controls>
  <li id=player_play><a title=play onclick="$('#jquery_jplayer').play(); return false;" href="#"><span>play</span></a></li>
  <li id=player_pause><a title=pause onclick="$('#jquery_jplayer').pause(); return false;" href="#"><span>pause</span></a></li>
  <li id=player_stop><a title=stop onclick="$('#jquery_jplayer').stop(); return false;" href="#"><span>stop</span></a></li>
</ul>
</div>
На этом все ждите новых уроков.

  • mihdan

    Так и где же урок все-таки? Напихали исходников и что?

  • admin

    Помоему все по пунктам расписано что и как. Урок расчитан НЕ на делетантов. Кому что непонятно пишите в коментах. Обьясним и разьясним :)

  • Sylfer

    блин срочно углубляться в jquery... такая вещь... да тут не плеер, скоро ос наверно на jquery будут создавать))))

  • Scrape

    Привет!

    Наконец-то хоть реальный пример появился!,

    только я вот незаметил куда вписывается файл, который должен проигрываться?, а если их несколько?

  • Алексей

    $(«#jquery_jplayer»).change ('example.mp3');

  • RadFace

    world-blog.ru/sample/example.mp3 — что за трек? Ответьте на мыло плз. =)

  • DeZMonT

    Спасибо огромное!))) Давно искал хороший плеер)))

  • жаль что нельзя без флэшу сотворить подобное. А так плеер наикрутейший.

  • Android

    А как сделать выбор треков в этом плеере?типа плейлиста

  • Igor Tsyganok

    как и куда добавлять музыку не пойму...

  • Пензин Константин

    В скрипте

    $(«#jquery_jplayer»).change ('example.mp3');

    Ссылка на файл example.mp3

  • Igor Tsyganok

    еще у меня такой вопросик подключаю фреймворк jQuery и у меня перестает работать слайдер как выйти с этого положения? скрипт я вставил в файл index.php а музыку так-же в ту папку вставлять? сайт rcard.com.ua

Запись навигация

Top