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