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

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

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

<script type=text/javascript src="js/jquery.js"></script>
<script type=text/javascript src="js/jquery.jplayer.js"></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>

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

Навигация по записям