jPlayer | save/load player current state

1,293 views
Skip to first unread message

Jani Krecic

unread,
Dec 3, 2011, 5:33:10 AM12/3/11
to jpl...@googlegroups.com
Hi guys!

I wonder if someone can give me some hint how to accomplish this...
I am running background music (jPlayer) on my webpage (wordpress | not jPlayer wp plugin) with 3 visible controls (play, pause, stop).
The player is set to autoplay on page load with repeat function, but when i click on menu link the page re-lodes itself and music is starting to play from beginning no matter if it was paused or stooped before i clicked on other link. I was thinking how to resolve this problem and what it comes to my mind is to somehow save current state of player into cookie and than on refresh read from that cookie and set player to that settings from the cookie... i just need little bit of help how to do that 'coz i am not really aaa programmer :)

Thx a lot for any help!!
J.

Dustin Blake

unread,
Dec 3, 2011, 6:28:09 AM12/3/11
to jpl...@googlegroups.com
Hi J, Thanks for stopping in :)

jPlayer, while playing, contains a currentTime value.  The currentTime stored in the jPlayer object is in seconds (jPlayer converts this into an hour:minute:second format for display).

The jPlayer play event also has an option to set a time, in seconds, to start the track from (e.g. $.jPlayer("play", seconds); )

So what you would need to do, is grab the current time when a user goes to another page, store it somewhere such as a cookie like you said, and then issue jPlayer look for that cookie, read the value and play from that time on the next page.

I suggest that you look at using the jQuery cookie plugin located at https://github.com/carhartl/jquery-cookie to read and write from a cookie for this purpose, unless your saavy enough to pass the information you want to store back and forth from a PHP script.


Jani Krecic

unread,
Dec 3, 2011, 11:16:21 AM12/3/11
to jPlayer: HTML5 Audio & Video for jQuery
Hi Dustin!
Thx for fast reply and hint to! ;)
Somehow i was thinking in the same way...
...i think it would be also possible to do it with php read/write to
file option.

I will try to experiment a bit with it and than i will post results
here.
Thx again.
J.

Jani Krecic

unread,
Dec 5, 2011, 2:03:47 PM12/5/11
to jPlayer: HTML5 Audio & Video for jQuery
Hi again :)

I would need a bit of help here ...

First i set a cookie:
$(".jp-pause").click(function() {
$.cookie("headPosition", $
("#jquery_jplayer_1").data("jPlayer").status.currentTime);
$.cookie("playStatePause", "pause");
});

Than i i check for cookie:
if ($.cookie("playStatePause") == "pause") {
$(this).jPlayer("pause", $.cookie("headPosition")); <-- here i
set it to pause and specified time when button was clicked
} -->

THe pause itself is working ok, but time is not working... it still
starts to play from beginning of the track when pa click play after
refresh...
Any idea ?

Jani Krecic

unread,
Dec 6, 2011, 7:27:19 PM12/6/11
to jPlayer: HTML5 Audio & Video for jQuery
ok. I will try to explain differently...

$(this).jPlayer("play", 25);
Here, the song will be played from 25.th second on...but if i put like
this:

function on click ->
var $varX = $("#jquery_jplayer_1").data("jPlayer").status.currentTime;

than i save to cookie and read from it:
$.cookie("headPosition", $varX);
var varZ = $.cookie("headPosition");

$(this).jPlayer("play", $varZ); ---> will not work!? and will start
playing from the begging of the track like $varZ would be empty but
it's not!
Console log shows headPosition number (or time in sec)

I would really need some hint here guys.
Thx, J.

Dustin Blake

unread,
Dec 7, 2011, 9:14:38 AM12/7/11
to jpl...@googlegroups.com
First you might want to make sure that your not attempting to issue the play ahead call right after you setMedia, there are some issues with doing that from what I recall.  Instead make sure you make the play ahead call elsewhere, such as on an event like canPlay or canplaythrough, here is a simple example:

$(id).bind($.jPlayer.event.canplaythrough, function() {
        $(id).jPlayer("play", playhead);
});

Secondly, the variable name for $.cookie("headPosition") your setting is not the same as the one your calling in play. varZ as compared to $varZ

Thirdly, I'm not sure if it matters or not, but I wouldn't use $ at the beginning of variables(like we do in PHP) in JavaScript when using jQuery, simply because of jQuery's use of it.  I mean it might not matter at all for all I know.

Bernhard Siwek

unread,
Dec 8, 2011, 2:44:33 PM12/8/11
to jpl...@googlegroups.com
Hi is there anywhere a "how to"?
I'm really interested to track the time & store it in a cookie.
Kind regards

Dmitry Mashkov

unread,
Dec 27, 2011, 6:35:59 AM12/27/11
to jPlayer: HTML5 Audio & Video for jQuery
.jPlayer("play", eval($.cookie("headPosition")));

On Dec 8, 9:44 pm, Bernhard Siwek <bernhardsi...@googlemail.com>
wrote:

hc kui

unread,
Dec 27, 2011, 7:38:29 AM12/27/11
to jpl...@googlegroups.com
I do not even detect it after I downloaded and setup it. There is no desktop icon, no indication of jplay anywhere on the itune.
Could you tell me what file it will play? I now use WAV.
Thank you.

2011/12/27 Dmitry Mashkov <dmma...@gmail.com>

--
You received this message because you are subscribed to the Google Groups "jPlayer: HTML5 Audio & Video for jQuery" group.
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.


Reply all
Reply to author
Forward
0 new messages