Moving jp-progress, jp-seek-bar, jp-play-bar

[Dan]

Hi, I want to move the progress bar away from the main player to a different part of the html page, and not attached to the player iteself.  I tried just moving the <div>, but that didn't work.  Is there a simple way of doing this?  Would the changes be very different in 2.1?  Should I wait until 2.1 is released?

Thanks,
Dan

[Arnaud BODEL]

Hi Dan,
i use

$('.jp-progress').css({'display':'none'})
$('.jp-progress').css({'display':'inline'})

to hide or display the progess bar.
There may be other way to do it, but I just discover jPlayer...

Le 21/07/11 16:22, Dan a �crit :

> --
> 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/-/rNCfVCbNg_QJ.
> 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.

[Arnaud BODEL]

oups, sorry
i have read "remove the progress bar" in a hurry

Le 21/07/11 16:22, Dan a écrit :

Hi, I want to move the progress bar away from the main player to a different part of the html page, and not attached to the player iteself.  I tried just moving the <div>, but that didn't work.  Is there a simple way of doing this?  Would the changes be very different in 2.1?  Should I wait until 2.1 is released?

Thanks,
Dan

--
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/-/rNCfVCbNg_QJ.
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.

--

Arnaud BODEL

7/22 Allée Floréal

59650 Villeneuve d'Ascq

France

Site: http://www.osw3.net

E-Mail: con...@osw3.net

Tel: +33.3.62.10.13.92

Mobile: +33.6.48.40.95.99

SIRET: 513.738.294.000.18

[Mark Panaghiston]

Hello Dan,

This can be done through the cssSelectorAncestor and cssSelector options. But it will seem complicated as you will then have to define every single control/feedback entity, since the defaults simply wont work with this sort of thing.

The fist thing to do is disable the cssSelectorAncestor completely, by setting it to an empty string:
{cssSelectorAncestor:""}

Then you have a choice here... Depending on whether you care going to have a single instance or multiple instances on a page.

The single instance is easy... The classes that exist are unique for this case, so you do not need to change the cssSelector defaults at all and can just move the progress bar HTML where you want it and then style it through CSS. The current skin CSS will probably require a number of tweaks to get it working somewhere else on the page as I tended to use quite strict selection conditions.

The multiple instance solution is where is gets complicated... I will explain it briefly now and give more details if you actually need to do it this way...

For the items that you want to remain in the normal interface, add the cssSelectorAncestor value directly to the cssSelector property. For example:
cssSelector: {
  play: "#jp_container_1 .jp-play"
}

For the progress bar, you could then have another unique ID to select the correct bars.

cssSelector: {
  seekBar: "#jp_progress_1 .jp-seek-bar"
}

As for whether to start with the current dev release or not... This is your choice... 2.1 is not a drop in replacement. Minor changes occurred that have small implications to the audio player and big ones for the video player. The skins are completely revised too.

Basically for an audio player, the cssSelectorAncestor default changed value... So not much really to get it working again.

There are a number of new features though with 2.1, which would not be enabled unless you used the newer skins or made one yourself.

I'd suggest that you use the latest version if you can muddle through the change log. I have tried to update the main docs with notes for the patch changes, but I expect I missed some. And the new features are only documented in this thread at this time:
https://groups.google.com/d/topic/jplayer/rdWPvU4GpB8/discussion

The latest skins are detailed in this thread:
https://groups.google.com/d/topic/jplayer/BLJURpOXwzU/discussion

[Dan]

Hi Mark,

Thanks for the reply.  Unfortunately I'm using multiple instances.  I have a main video player that I called 'jp_interface_1' as the cssSelectorAncestor, and the other video is a pop-up that I called 'cssSelectorAncestor'.  I only want to customize the main player, the second pop-up one is fine the way it is.  When the pop-up video is called, I have the "pauseOthers" bound to its play event.

Once I cleared the cssSelectorAncestor property, I was able to move the bars to where I wanted, but then obviously started to get conflicts with the controls of the main player and the pop-up.  Do I continue to use my previous cssSelectorAncestor names, but declare each one in the cssSelector section instead?  Can I keep the cssSelectorAncestor name of the pop-up, or do I need to clear that one as well?

Dan

[Mark Panaghiston]

This is simple if you understand the way a jQuery selector works... Or if you understand a CSS selector... As they are pretty similar, if not striving to be the same.

The popup player... in the HTML use the id="jp_container_2" to specify the interface. In the jPlayer constructor options, cssSelectorAncestor:"#jp_container_2". This player should now be done.

In the main player... Do as I said in the last email... Clear the cssSelectorAncestor and then add it manually to each explicit cssSelector.
cssSelectorAncestor:"", then...

For the items that you want to remain in the normal interface, add the cssSelectorAncestor value directly to the cssSelector property. For example:
cssSelector: {
  play: "#jp_container_1 .jp-play"
}

For the progress bar, you could then have another unique ID to select the correct bars.

cssSelector: {
  seekBar: "#jp_progress_1 .jp-seek-bar"
}

The main player then has the id="jp_container_1" for the HTML GUI and then the progress bars use the id="jp_progress_1" to associate the progress with that entity.

[Dan]

Thanks again Mark.  Everything is working perfectly now.

Dan

[Dan]

Hi Mark,

I did notice some strange behavior upon testing this further.

if I just have 'play: "#jp_interface_1 .jp-play"' in the cssSelector, the popup player's progress bar moves the main player's progress bar, but only when I open the popup player for the first time.  If I close it and then open it again, it works fine.  As a workaround, I can create the player, use the two lines below, and the create the player again.
$("#jquery_jplayer_2").jPlayer("stop");
$("#jquery_jplayer_2").jPlayer("destroy");

If I also add 'seekBar: "#jp_progress_1 .jp-seek-bar"' to the cssSelector, I get the following seek-bar that has shading issues and is not clickable anywhere.



Dan

[Dan]

Picture of seek-bar.