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"> </div> 199 <div class="jp-duration" role="timer" aria-label="duration"> </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"> </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