Skip to content

Commit cb78301

Browse files
thepagthepag
committed
Added the demos
1 parent c6e6e64 commit cb78301

45 files changed

Lines changed: 8978 additions & 0 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎examples/blue.monday/demo-01-android.htm‎

Lines changed: 221 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,221 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
6+
<!-- Website Design By: www.happyworm.com -->
7+
<title>Demo : jPlayer Android Fix</title>
8+
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
9+
<link href="../../skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
10+
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
11+
<script type="text/javascript" src="../../js/jplayer/jquery.jplayer.min.js"></script>
12+
<script type="text/javascript">
13+
//<![CDATA[
14+
15+
// TMP For testing on standard browsers.
16+
// $.jPlayer.platform.android = true;
17+
18+
var jPlayerAndroidFix = (function($) {
19+
var fix = function(id, media, options) {
20+
this.playFix = false;
21+
this.init(id, media, options);
22+
};
23+
fix.prototype = {
24+
init: function(id, media, options) {
25+
var self = this;
26+
27+
// Store the params
28+
this.id = id;
29+
this.media = media;
30+
this.options = options;
31+
32+
// Make a jQuery selector of the id, for use by the jPlayer instance.
33+
this.player = $(this.id);
34+
35+
// Make the ready event to set the media to initiate.
36+
this.player.bind($.jPlayer.event.ready, function(event) {
37+
// Use this fix's setMedia() method.
38+
self.setMedia(self.media);
39+
});
40+
41+
// Apply Android fixes
42+
if($.jPlayer.platform.android) {
43+
44+
// Fix playing new media immediately after setMedia.
45+
this.player.bind($.jPlayer.event.progress, function(event) {
46+
if(self.playFixRequired) {
47+
self.playFixRequired = false;
48+
49+
// Enable the contols again
50+
// self.player.jPlayer('option', 'cssSelectorAncestor', self.cssSelectorAncestor);
51+
52+
// Play if required, otherwise it will wait for the normal GUI input.
53+
if(self.playFix) {
54+
self.playFix = false;
55+
$(this).jPlayer("play");
56+
}
57+
}
58+
});
59+
// Fix missing ended events.
60+
this.player.bind($.jPlayer.event.ended, function(event) {
61+
if(self.endedFix) {
62+
self.endedFix = false;
63+
setTimeout(function() {
64+
self.setMedia(self.media);
65+
},0);
66+
// what if it was looping?
67+
}
68+
});
69+
this.player.bind($.jPlayer.event.pause, function(event) {
70+
if(self.endedFix) {
71+
var remaining = event.jPlayer.status.duration - event.jPlayer.status.currentTime;
72+
if(event.jPlayer.status.currentTime === 0 || remaining < 1) {
73+
// Trigger the ended event from inside jplayer instance.
74+
setTimeout(function() {
75+
self.jPlayer._trigger($.jPlayer.event.ended);
76+
},0);
77+
}
78+
}
79+
});
80+
}
81+
82+
// Instance jPlayer
83+
this.player.jPlayer(this.options);
84+
85+
// Store a local copy of the jPlayer instance's object
86+
this.jPlayer = this.player.data('jPlayer');
87+
88+
// Store the real cssSelectorAncestor being used.
89+
this.cssSelectorAncestor = this.player.jPlayer('option', 'cssSelectorAncestor');
90+
91+
// Apply Android fixes
92+
this.resetAndroid();
93+
94+
return this;
95+
},
96+
setMedia: function(media) {
97+
this.media = media;
98+
99+
// Apply Android fixes
100+
this.resetAndroid();
101+
102+
// Set the media
103+
this.player.jPlayer("setMedia", this.media);
104+
return this;
105+
},
106+
play: function() {
107+
// Apply Android fixes
108+
if($.jPlayer.platform.android && this.playFixRequired) {
109+
// Apply Android play fix, if it is required.
110+
this.playFix = true;
111+
} else {
112+
// Other browsers play it, as does Android if the fix is no longer required.
113+
this.player.jPlayer("play");
114+
}
115+
},
116+
resetAndroid: function() {
117+
// Apply Android fixes
118+
if($.jPlayer.platform.android) {
119+
this.playFix = false;
120+
this.playFixRequired = true;
121+
this.endedFix = true;
122+
// Disable the controls
123+
// this.player.jPlayer('option', 'cssSelectorAncestor', '#NeverFoundDisabled');
124+
}
125+
}
126+
};
127+
return fix;
128+
})(jQuery);
129+
130+
$(document).ready(function() {
131+
132+
var id = "#jquery_jplayer_1";
133+
134+
var bubble = {
135+
title:"Bubble",
136+
mp3:"http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3",
137+
oga:"http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
138+
};
139+
var lismore = {
140+
title:"Lismore",
141+
mp3:"http://www.jplayer.org/audio/mp3/Miaow-04-Lismore.mp3",
142+
oga:"http://www.jplayer.org/audio/ogg/Miaow-04-Lismore.ogg"
143+
};
144+
145+
var options = {
146+
swfPath: "../../js/jplayer",
147+
supplied: "mp3,oga",
148+
wmode: "window",
149+
smoothPlayBar: true,
150+
keyEnabled: true,
151+
remainingDuration: true,
152+
toggleDuration: true
153+
};
154+
155+
var myAndroidFix = new jPlayerAndroidFix(id, bubble, options);
156+
157+
$('#setMedia-Bubble').click(function() {
158+
myAndroidFix.setMedia(bubble);
159+
});
160+
$('#setMedia-Bubble-play').click(function() {
161+
myAndroidFix.setMedia(bubble).play();
162+
});
163+
164+
$('#setMedia-Lismore').click(function() {
165+
myAndroidFix.setMedia(lismore);
166+
});
167+
$('#setMedia-Lismore-play').click(function() {
168+
myAndroidFix.setMedia(lismore).play();
169+
});
170+
171+
});
172+
//]]>
173+
</script>
174+
</head>
175+
<body>
176+
177+
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
178+
179+
<div id="jp_container_1" class="jp-audio">
180+
<div class="jp-type-single">
181+
<div class="jp-gui jp-interface">
182+
<ul class="jp-controls">
183+
<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
184+
<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
185+
<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
186+
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
187+
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
188+
<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
189+
</ul>
190+
<div class="jp-progress">
191+
<div class="jp-seek-bar">
192+
<div class="jp-play-bar"></div>
193+
</div>
194+
</div>
195+
<div class="jp-volume-bar">
196+
<div class="jp-volume-bar-value"></div>
197+
</div>
198+
<div class="jp-time-holder">
199+
<div class="jp-current-time"></div>
200+
<div class="jp-duration"></div>
201+
202+
<ul class="jp-toggles">
203+
<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
204+
<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
205+
</ul>
206+
</div>
207+
</div>
208+
<div class="jp-details">
209+
<ul>
210+
<li><span class="jp-title"></span></li>
211+
</ul>
212+
</div>
213+
<div class="jp-no-solution">
214+
<span>Update Required</span>
215+
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>.
216+
</div>
217+
</div>
218+
</div>
219+
</body>
220+
221+
</html>

‎examples/blue.monday/demo-01-solution-flash-html.htm‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
6+
<!-- Website Design By: www.happyworm.com -->
7+
<title>Demo : jPlayer as an audio player</title>
8+
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
9+
<link href="../../skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
10+
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
11+
<script type="text/javascript" src="../../js/jplayer/jquery.jplayer.min.js"></script>
12+
<script type="text/javascript">
13+
//<![CDATA[
14+
$(document).ready(function(){
15+
16+
$("#jquery_jplayer_1").jPlayer({
17+
ready: function () {
18+
$(this).jPlayer("setMedia", {
19+
title: "Bubble",
20+
m4a: "http://jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
21+
oga: "http://jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
22+
});
23+
},
24+
swfPath: "../../js/jplayer",
25+
solution: "flash, html",
26+
supplied: "m4a, oga",
27+
wmode: "window",
28+
smoothPlayBar: true,
29+
keyEnabled: true,
30+
remainingDuration: true,
31+
toggleDuration: true
32+
});
33+
});
34+
//]]>
35+
</script>
36+
</head>
37+
<body>
38+
39+
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
40+
41+
<div id="jp_container_1" class="jp-audio">
42+
<div class="jp-type-single">
43+
<div class="jp-gui jp-interface">
44+
<ul class="jp-controls">
45+
<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
46+
<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
47+
<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
48+
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
49+
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
50+
<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
51+
</ul>
52+
<div class="jp-progress">
53+
<div class="jp-seek-bar">
54+
<div class="jp-play-bar"></div>
55+
</div>
56+
</div>
57+
<div class="jp-volume-bar">
58+
<div class="jp-volume-bar-value"></div>
59+
</div>
60+
<div class="jp-time-holder">
61+
<div class="jp-current-time"></div>
62+
<div class="jp-duration"></div>
63+
64+
<ul class="jp-toggles">
65+
<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
66+
<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
67+
</ul>
68+
</div>
69+
</div>
70+
<div class="jp-details">
71+
<ul>
72+
<li><span class="jp-title"></span></li>
73+
</ul>
74+
</div>
75+
<div class="jp-no-solution">
76+
<span>Update Required</span>
77+
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>.
78+
</div>
79+
</div>
80+
</div>
81+
</body>
82+
83+
</html>

‎examples/blue.monday/demo-01-supplied-mp3.htm‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
6+
<!-- Website Design By: www.happyworm.com -->
7+
<title>Demo : jPlayer as an audio player</title>
8+
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
9+
<link href="../../skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
10+
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
11+
<script type="text/javascript" src="../../js/jplayer/jquery.jplayer.min.js"></script>
12+
<script type="text/javascript">
13+
//<![CDATA[
14+
$(document).ready(function(){
15+
16+
$("#jquery_jplayer_1").jPlayer({
17+
ready: function () {
18+
$(this).jPlayer("setMedia", {
19+
title: "Bubble",
20+
mp3: "http://jplayer.org/audio/mp3/Miaow-07-Bubble.mp3"
21+
});
22+
},
23+
swfPath: "../../js/jplayer",
24+
supplied: "mp3",
25+
wmode: "window",
26+
smoothPlayBar: true,
27+
keyEnabled: true,
28+
remainingDuration: true,
29+
toggleDuration: true
30+
});
31+
});
32+
//]]>
33+
</script>
34+
</head>
35+
<body>
36+
37+
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
38+
39+
<div id="jp_container_1" class="jp-audio">
40+
<div class="jp-type-single">
41+
<div class="jp-gui jp-interface">
42+
<ul class="jp-controls">
43+
<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
44+
<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
45+
<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
46+
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
47+
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
48+
<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
49+
</ul>
50+
<div class="jp-progress">
51+
<div class="jp-seek-bar">
52+
<div class="jp-play-bar"></div>
53+
</div>
54+
</div>
55+
<div class="jp-volume-bar">
56+
<div class="jp-volume-bar-value"></div>
57+
</div>
58+
<div class="jp-time-holder">
59+
<div class="jp-current-time"></div>
60+
<div class="jp-duration"></div>
61+
62+
<ul class="jp-toggles">
63+
<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
64+
<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
65+
</ul>
66+
</div>
67+
</div>
68+
<div class="jp-details">
69+
<ul>
70+
<li><span class="jp-title"></span></li>
71+
</ul>
72+
</div>
73+
<div class="jp-no-solution">
74+
<span>Update Required</span>
75+
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>.
76+
</div>
77+
</div>
78+
</div>
79+
</body>
80+
81+
</html>

0 commit comments

Comments
 (0)