Re: [jPlayer] Circle Player Progress Bar

Showing 1-2 of 2 messages
Re: [jPlayer] Circle Player Progress Bar Mohamed Alam 6/28/12 8:43 PM
<!DOCTYPE html>
<meta charset=utf-8 />

<!-- Website Design By: -->
<title>Demo : jPlayer circle player</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="skin/">
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="js/jquery.transform.js"></script>
<script type="text/javascript" src="js/jquery.grab.js"></script>
<script type="text/javascript" src="js/mod.csstransforms.min.js"></script>
<script type="text/javascript" src="js/circle.player.js"></script>

<script type="text/javascript">


* Instance CirclePlayer inside jQuery doc ready
* CirclePlayer(jPlayerSelector, media, options)
*   jPlayerSelector: String - The css selector of the jPlayer div.
*   media: Object - The media object used in jPlayer("setMedia",media).
*   options: Object - The jPlayer options.
* Multiple instances must set the cssSelectorAncestor in the jPlayer options. Defaults to "#cp_container_1" in CirclePlayer.
* The CirclePlayer uses the default supplied:"m4a, oga" if not given, which is different from the jPlayer default of supplied:"mp3"
* Note that the {wmode:"window"} option is set to ensure playback in Firefox 3.6 with the Flash solution.
* However, the OGA format would be used in this case with the HTML solution.

var myCirclePlayer = new CirclePlayer("#jquery_jplayer_1",
}, {
cssSelectorAncestor: "#cp_container_1",
swfPath: "js",
wmode: "window"

<!-- The jPlayer div must not be hidden. Keep it at the root of the body element to avoid any such problems. -->
<div id="jquery_jplayer_1" class="cp-jplayer"></div>

<!-- The container for the interface can go where you want to display it. Show and hide it as you need. -->

<div id="cp_container_1" class="cp-container">
<div class="cp-buffer-holder"> <!-- .cp-gt50 only needed when buffer is > than 50% -->
<div class="cp-buffer-1"></div>
<div class="cp-buffer-2"></div>
<div class="cp-progress-holder"> <!-- .cp-gt50 only needed when progress is > than 50% -->
<div class="cp-progress-1"></div>
<div class="cp-progress-2"></div>
<div class="cp-circle-control"></div>
<ul class="cp-controls">
<li><a href="#" class="cp-play" tabindex="1">play</a></li>
<li><a href="#" class="cp-pause" style="display:none;" tabindex="1">pause</a></li> <!-- Needs the inline style here, or uses display:inline instead of display:block -->



On Fri, Jun 29, 2012 at 1:57 AM, Joseph <> wrote:
I have not been able to get the progress bar to work on the circle player. I have read other posts here on the subject and looked at the code of other sites where it does work, but I cannot determine where I am going wrong. I notice that on other sites, the progress bar is initiated on click of play. This is not occurring for me. If anyone could visit my page at to offer advice, I would greatly appreciate it.
Kindest thanks,

You received this message because you are subscribed to the Google Groups "jPlayer: HTML5 Audio & Video for jQuery" group.
To view this discussion on the web visit
To post to this group, send email to
To unsubscribe from this group, send email to
For more options, visit this group at

Re: Circle Player Progress Bar Joseph 6/29/12 8:31 AM
I believe I have identified the problem - it appears to be the character set specified in the "http-equiv" line in the header. When I changed it to "UTF-8" from "iso-8859-1", the buffer and progress bars began working.
Thank you Rambo for your help.