1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8" />
5<!-- Website Design By: www.happyworm.com -->
6<title>Demo : jPlayer circle player</title>
7<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
8<link rel="stylesheet" href="../../lib/circle-player/skin/circle.player.css">
9<script type="text/javascript" src="../../lib/jquery.min.js"></script>
10<script type="text/javascript" src="../../dist/jplayer/jquery.jplayer.min.js"></script>
11<script type="text/javascript" src="../../lib/circle-player/js/jquery.transform2d.js"></script>
12<script type="text/javascript" src="../../lib/circle-player/js/jquery.grab.js"></script>
13<script type="text/javascript" src="../../lib/circle-player/js/mod.csstransforms.min.js"></script>
14<script type="text/javascript" src="../../lib/circle-player/js/circle.player.js"></script>
15
16<script type="text/javascript">
17//<![CDATA[
18
19$(document).ready(function(){
20
21	/*
22	 * Instance CirclePlayer inside jQuery doc ready
23	 *
24	 * CirclePlayer(jPlayerSelector, media, options)
25	 *   jPlayerSelector: String - The css selector of the jPlayer div.
26	 *   media: Object - The media object used in jPlayer("setMedia",media).
27	 *   options: Object - The jPlayer options.
28	 *
29	 * Multiple instances must set the cssSelectorAncestor in the jPlayer options. Defaults to "#cp_container_1" in CirclePlayer.
30	 *
31	 * The CirclePlayer uses the default supplied:"m4a, oga" if not given, which is different from the jPlayer default of supplied:"mp3"
32	 * Note that the {wmode:"window"} option is set to ensure playback in Firefox 3.6 with the Flash solution.
33	 * However, the OGA format would be used in this case with the HTML solution.
34	 */
35
36	var myCirclePlayer = new CirclePlayer("#jquery_jplayer_1",
37	{
38		m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
39		oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
40	}, {
41		cssSelectorAncestor: "#cp_container_1",
42		swfPath: "../../dist/jplayer",
43		wmode: "window",
44		keyEnabled: true
45	});
46});
47//]]>
48</script>
49</head>
50<body>
51
52			<!-- The jPlayer div must not be hidden. Keep it at the root of the body element to avoid any such problems. -->
53			<div id="jquery_jplayer_1" class="cp-jplayer"></div>
54
55			<!-- The container for the interface can go where you want to display it. Show and hide it as you need. -->
56
57			<div id="cp_container_1" class="cp-container">
58				<div class="cp-buffer-holder"> <!-- .cp-gt50 only needed when buffer is > than 50% -->
59					<div class="cp-buffer-1"></div>
60					<div class="cp-buffer-2"></div>
61				</div>
62				<div class="cp-progress-holder"> <!-- .cp-gt50 only needed when progress is > than 50% -->
63					<div class="cp-progress-1"></div>
64					<div class="cp-progress-2"></div>
65				</div>
66				<div class="cp-circle-control"></div>
67				<ul class="cp-controls">
68					<li><a class="cp-play" tabindex="1">play</a></li>
69					<li><a class="cp-pause" style="display:none;" tabindex="1">pause</a></li> <!-- Needs the inline style here, or jQuery.show() uses display:inline instead of display:block -->
70				</ul>
71			</div>
72
73</body>
74
75</html>
76