1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8" />
5<!-- Website Design By: www.happyworm.com -->
6<title>Demo : jPlayer with jQuery UI</title>
7<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
8<link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.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="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
12
13<script type="text/javascript">
14//<![CDATA[
15
16$(document).ready(function(){
17
18	/*
19	 * jQuery UI ThemeRoller
20	 *
21	 * Includes code to hide GUI volume controls on mobile devices.
22	 * ie., Where volume controls have no effect. See noVolume option for more info.
23	 *
24	 * Includes fix for Flash solution with MP4 files.
25	 * ie., The timeupdates are ignored for 1000ms after changing the play-head.
26	 * Alternative solution would be to use the slider option: {animate:false}
27	 */
28
29	var myPlayer = $("#jquery_jplayer_1"),
30		myPlayerData,
31		fixFlash_mp4, // Flag: The m4a and m4v Flash player gives some old currentTime values when changed.
32		fixFlash_mp4_id, // Timeout ID used with fixFlash_mp4
33		ignore_timeupdate, // Flag used with fixFlash_mp4
34		options = {
35			ready: function (event) {
36				// Hide the volume slider on mobile browsers. ie., They have no effect.
37				if(event.jPlayer.status.noVolume) {
38					// Add a class and then CSS rules deal with it.
39					$(".jp-gui").addClass("jp-no-volume");
40				}
41				// Determine if Flash is being used and the mp4 media type is supplied. BTW, Supplying both mp3 and mp4 is pointless.
42				fixFlash_mp4 = event.jPlayer.flash.used && /m4a|m4v/.test(event.jPlayer.options.supplied);
43				// Setup the player with media.
44				$(this).jPlayer("setMedia", {
45					// mp3: "http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3",
46					m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
47					oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
48				});
49			},
50			timeupdate: function(event) {
51				if(!ignore_timeupdate) {
52					myControl.progress.slider("value", event.jPlayer.status.currentPercentAbsolute);
53				}
54			},
55			volumechange: function(event) {
56				if(event.jPlayer.options.muted) {
57					myControl.volume.slider("value", 0);
58				} else {
59					myControl.volume.slider("value", event.jPlayer.options.volume);
60				}
61			},
62			swfPath: "../../dist/jplayer",
63			supplied: "m4a, oga",
64			cssSelectorAncestor: "#jp_container_1",
65			wmode: "window",
66			keyEnabled: true
67		},
68		myControl = {
69			progress: $(options.cssSelectorAncestor + " .jp-progress-slider"),
70			volume: $(options.cssSelectorAncestor + " .jp-volume-slider")
71		};
72
73	// Instance jPlayer
74	myPlayer.jPlayer(options);
75
76	// A pointer to the jPlayer data object
77	myPlayerData = myPlayer.data("jPlayer");
78
79	// Define hover states of the buttons
80	$('.jp-gui ul li').hover(
81		function() { $(this).addClass('ui-state-hover'); },
82		function() { $(this).removeClass('ui-state-hover'); }
83	);
84
85	// Create the progress slider control
86	myControl.progress.slider({
87		animate: "fast",
88		max: 100,
89		range: "min",
90		step: 0.1,
91		value : 0,
92		slide: function(event, ui) {
93			var sp = myPlayerData.status.seekPercent;
94			if(sp > 0) {
95				// Apply a fix to mp4 formats when the Flash is used.
96				if(fixFlash_mp4) {
97					ignore_timeupdate = true;
98					clearTimeout(fixFlash_mp4_id);
99					fixFlash_mp4_id = setTimeout(function() {
100						ignore_timeupdate = false;
101					},1000);
102				}
103				// Move the play-head to the value and factor in the seek percent.
104				myPlayer.jPlayer("playHead", ui.value * (100 / sp));
105			} else {
106				// Create a timeout to reset this slider to zero.
107				setTimeout(function() {
108					myControl.progress.slider("value", 0);
109				}, 0);
110			}
111		}
112	});
113
114	// Create the volume slider control
115	myControl.volume.slider({
116		animate: "fast",
117		max: 1,
118		range: "min",
119		step: 0.01,
120		value : $.jPlayer.prototype.options.volume,
121		slide: function(event, ui) {
122			myPlayer.jPlayer("option", "muted", false);
123			myPlayer.jPlayer("option", "volume", ui.value);
124		}
125	});
126
127});
128//]]>
129</script>
130<style>
131<!--
132.jp-gui {
133	position:relative;
134	padding:20px;
135	width:628px;
136}
137.jp-gui.jp-no-volume {
138	width:432px;
139}
140.jp-gui ul {
141	margin:0;
142	padding:0;
143}
144.jp-gui ul li {
145	position:relative;
146	float:left;
147	list-style:none;
148	margin:2px;
149	padding:4px 0;
150	cursor:pointer;
151}
152.jp-gui ul li a {
153	margin:0 4px;
154}
155.jp-gui li.jp-repeat,
156.jp-gui li.jp-repeat-off {
157	margin-left:344px;
158}
159.jp-gui li.jp-mute,
160.jp-gui li.jp-unmute {
161	margin-left:20px;
162}
163.jp-gui li.jp-volume-max {
164	margin-left:120px;
165}
166li.jp-pause,
167li.jp-repeat-off,
168li.jp-unmute,
169.jp-no-solution {
170	display:none;
171}
172.jp-progress-slider {
173	position:absolute;
174	top:28px;
175	left:100px;
176	width:300px;
177}
178.jp-progress-slider .ui-slider-handle {
179	cursor:pointer;
180}
181.jp-volume-slider {
182	position:absolute;
183	top:31px;
184	left:508px;
185	width:100px;
186	height:.4em;
187}
188.jp-volume-slider .ui-slider-handle {
189	height:.8em;
190	width:.8em;
191	cursor:pointer;
192}
193.jp-gui.jp-no-volume .jp-volume-slider {
194	display:none;
195}
196.jp-current-time,
197.jp-duration {
198	position:absolute;
199	top:42px;
200	font-size:0.8em;
201	cursor:default;
202}
203.jp-current-time {
204	left:100px;
205}
206.jp-duration {
207	right:266px;
208}
209.jp-gui.jp-no-volume .jp-duration {
210	right:70px;
211}
212.jp-clearboth {
213	clear:both;
214}
215-->
216</style>
217</head>
218<body>
219
220		<div id="jquery_jplayer_1" class="jp-jplayer"></div>
221
222		<div id="jp_container_1">
223			<div class="jp-gui ui-widget ui-widget-content ui-corner-all">
224				<ul>
225					<li class="jp-play ui-state-default ui-corner-all"><a href="javascript:;" class="jp-play ui-icon ui-icon-play" tabindex="1" title="play">play</a></li>
226					<li class="jp-pause ui-state-default ui-corner-all"><a href="javascript:;" class="jp-pause ui-icon ui-icon-pause" tabindex="1" title="pause">pause</a></li>
227					<li class="jp-stop ui-state-default ui-corner-all"><a href="javascript:;" class="jp-stop ui-icon ui-icon-stop" tabindex="1" title="stop">stop</a></li>
228					<li class="jp-repeat ui-state-default ui-corner-all"><a href="javascript:;" class="jp-repeat ui-icon ui-icon-refresh" tabindex="1" title="repeat">repeat</a></li>
229					<li class="jp-repeat-off ui-state-default ui-state-active ui-corner-all"><a href="javascript:;" class="jp-repeat-off ui-icon ui-icon-refresh" tabindex="1" title="repeat off">repeat off</a></li>
230					<li class="jp-mute ui-state-default ui-corner-all"><a href="javascript:;" class="jp-mute ui-icon ui-icon-volume-off" tabindex="1" title="mute">mute</a></li>
231					<li class="jp-unmute ui-state-default ui-state-active ui-corner-all"><a href="javascript:;" class="jp-unmute ui-icon ui-icon-volume-off" tabindex="1" title="unmute">unmute</a></li>
232					<li class="jp-volume-max ui-state-default ui-corner-all"><a href="javascript:;" class="jp-volume-max ui-icon ui-icon-volume-on" tabindex="1" title="max volume">max volume</a></li>
233				</ul>
234				<div class="jp-progress-slider"></div>
235				<div class="jp-volume-slider"></div>
236				<div class="jp-current-time"></div>
237				<div class="jp-duration"></div>
238				<div class="jp-clearboth"></div>
239			</div>
240			<div class="jp-no-solution">
241				<span>Update Required</span>
242				To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
243			</div>
244		</div>
245
246</body>
247
248</html>
249