1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8" /> 5<!-- Website Design By: www.happyworm.com --> 6<title>Demo : jPlayer circle player</title> 7<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 8<link rel="stylesheet" href="../../lib/circle-player/skin/circle.player.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="../../lib/circle-player/js/jquery.transform2d.js"></script> 12<script type="text/javascript" src="../../lib/circle-player/js/jquery.grab.js"></script> 13<script type="text/javascript" src="../../lib/circle-player/js/mod.csstransforms.min.js"></script> 14<script type="text/javascript" src="../../lib/circle-player/js/circle.player.js"></script> 15 16<script type="text/javascript"> 17//<![CDATA[ 18 19$(document).ready(function(){ 20 21 /* 22 * Instance CirclePlayer inside jQuery doc ready 23 * 24 * CirclePlayer(jPlayerSelector, media, options) 25 * jPlayerSelector: String - The css selector of the jPlayer div. 26 * media: Object - The media object used in jPlayer("setMedia",media). 27 * options: Object - The jPlayer options. 28 * 29 * Multiple instances must set the cssSelectorAncestor in the jPlayer options. Defaults to "#cp_container_1" in CirclePlayer. 30 * 31 * The CirclePlayer uses the default supplied:"m4a, oga" if not given, which is different from the jPlayer default of supplied:"mp3" 32 * Note that the {wmode:"window"} option is set to ensure playback in Firefox 3.6 with the Flash solution. 33 * However, the OGA format would be used in this case with the HTML solution. 34 */ 35 36 var myCirclePlayer = new CirclePlayer("#jquery_jplayer_1", 37 { 38 m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a", 39 oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg" 40 }, { 41 cssSelectorAncestor: "#cp_container_1", 42 swfPath: "../../dist/jplayer", 43 wmode: "window", 44 keyEnabled: true 45 }); 46}); 47//]]> 48</script> 49</head> 50<body> 51 52 <!-- The jPlayer div must not be hidden. Keep it at the root of the body element to avoid any such problems. --> 53 <div id="jquery_jplayer_1" class="cp-jplayer"></div> 54 55 <!-- The container for the interface can go where you want to display it. Show and hide it as you need. --> 56 57 <div id="cp_container_1" class="cp-container"> 58 <div class="cp-buffer-holder"> <!-- .cp-gt50 only needed when buffer is > than 50% --> 59 <div class="cp-buffer-1"></div> 60 <div class="cp-buffer-2"></div> 61 </div> 62 <div class="cp-progress-holder"> <!-- .cp-gt50 only needed when progress is > than 50% --> 63 <div class="cp-progress-1"></div> 64 <div class="cp-progress-2"></div> 65 </div> 66 <div class="cp-circle-control"></div> 67 <ul class="cp-controls"> 68 <li><a class="cp-play" tabindex="1">play</a></li> 69 <li><a class="cp-pause" style="display:none;" tabindex="1">pause</a></li> <!-- Needs the inline style here, or jQuery.show() uses display:inline instead of display:block --> 70 </ul> 71 </div> 72 73</body> 74 75</html> 76