Re: [jPlayer] Circle Player Progress Bar

529 views
Skip to first unread message

Mohamed Alam

unread,
Jun 28, 2012, 11:43:34 PM6/28/12
to jpl...@googlegroups.com
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />

<!-- Website Design By: www.happyworm.com -->
<title>Demo : jPlayer circle player</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="skin/circle.skin/circle.player.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></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">
//<![CDATA[

$(document).ready(function(){

/*
* 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"
});
});
//]]>
</script>
</head>
<body>

<!-- 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>
<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>
<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 jQuery.show() uses display:inline instead of display:block -->
</ul>
</div>

</body>

</html>


On Fri, Jun 29, 2012 at 1:57 AM, Joseph <pro...@hotmail.com> wrote:
Hello,
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 http://companionstar.org/staging/dream/index_audio.html to offer advice, I would greatly appreciate it.
Kindest thanks,
Joseph

--
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 https://groups.google.com/d/msg/jplayer/-/-QtWMuNPfHEJ.
To post to this group, send email to jpl...@googlegroups.com.
To unsubscribe from this group, send email to jplayer+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/jplayer?hl=en.

Joseph

unread,
Jun 29, 2012, 11:31:46 AM6/29/12
to jpl...@googlegroups.com
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.
Joseph
Reply all
Reply to author
Forward
0 new messages