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