JPlayer , using android , not working
NK,Lee
Mark Panaghiston
Android can be difficult to design for since there are so many flavours and every device is different.
With Android 2.3 we solved a number of issues by using an external controller:
http://jplayer.org/latest/developer-guide/#jPlayer-known-issues-android
One of the problems with integrating that into jPlayer core is that, for example, a playlist type use would be doing a lot of extra stuff that was not necessary and it would actually stop it from working if you did that stuff for the ended event.
Maybe it will give you some ideas though... And maybe you would like to try your hand at fixing it too by forking GitHub.
In the code I do do some iOS specific stuff, by using a flag to know the 1st time is ignored and then the progress event tells jPlayer that iOS is doing something so we can now jump to the correct time.
If you are stuck for time though... Add a delay between setMedia and play(time). In addition, the first time ever on a page, setMedia then play and then play(time), each with a small delay between. You could also use the progress event handler to keep the delay to a minimum.
Ron Eslinger
Mark Panaghiston
http://jplayer.org/latest/developer-guide/#jPlayer-known-issues-android
The main part that is of interest is the ability to play the tracks in the playlist on Android, not the ended stuff - which I'd consider as secondary.
If you look at that "fix" it uses the progress event to know when the Android Audio instance is ready to play. So normal browsers just follow the W3C spec, but Android sets flags and stuff that trigger the play on the progress event's first occurrence after the setMedia. The other item of note is that the preload option must not be "none". Otherwise the progress event never fires at all.
A gross way of doing it would be to add a 1 or 2 second delay on the play() method of the playlist. You'd add the delay when you detect Android is being used... And probably want to store the timeout id and kill it before creating a new one just in case some caffeine crazed user spams the track.
Ron Eslinger
--
You received this message because you are subscribed to a topic in the Google Groups "jPlayer: HTML5 Audio & Video for jQuery" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/jplayer/MMm3BXFShqc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to jplayer+u...@googlegroups.com.
To post to this group, send email to jpl...@googlegroups.com.
Visit this group at http://groups.google.com/group/jplayer.
For more options, visit https://groups.google.com/groups/opt_out.
Mark Panaghiston
https://github.com/happyworm/jPlayer/blob/master/add-on/jplayer.playlist.js#L401
This part here is the problem part....
if(this.playlist.length) {this.select(index);$(this.cssSelector.jPlayer).jPlayer("play");}
We need to insert a delay for the Android devices between the select(index) and the jPlayer("play"). Ideally this is done via the progress event to give a robust solution, where you set a flag that is then captured.
I cannot provide clean and tested code for that right now. I will provide the delay solution next and then give a best guess as to the other solution code.
Solution A - With a timeout:
play: function(index) {
var self = this;
index = (index < 0) ? this.original.length + index : index; // Negative index relates to end of array.
if(0 <= index && index < this.playlist.length) {if(this.playlist.length) {this.select(index);
if($.jPlayer.platform.android) {
clearTimeout(this.androidFixID);
this.androidFixID = setTimeout(function() {
$(self.cssSelector.jPlayer).jPlayer("play");
}, 2000);
} else {$(this.cssSelector.jPlayer).jPlayer("play");
}}} else if(index === undefined) {$(this.cssSelector.jPlayer).jPlayer("play");}},
Solution B - With an event handler:
jPlayerPlaylist = function(cssSelector, playlist, options) {
(Many lines... look at the end of it for:)
}// Create a progress event handler to fix android$(this.cssSelector.jPlayer).bind($.jPlayer.event.progress, function() {
if(self.androidFix) {self.androidFix = false;
$(this).jPlayer("play");
}});
// Instance jPlayer$(this.cssSelector.jPlayer).jPlayer(this.options);};
play: function(index) {
index = (index < 0) ? this.original.length + index : index; // Negative index relates to end of array.
if(0 <= index && index < this.playlist.length) {if(this.playlist.length) {this.select(index);
if($.jPlayer.platform.android) {
this.androidFix = true;
} else {$(this.cssSelector.jPlayer).jPlayer("play");
}}} else if(index === undefined) {$(this.cssSelector.jPlayer).jPlayer("play");}},
The solution B will be the best if you can get it working. My code should be correct, but check in the console for syntax errors that might have slipped me by.
I think I'll use this (solution B) method to fix the jPlayer core... In practice, even if you have fixed it in your code, and then update to a new jPlayer in future, both codes would work in harmony and only result in 2 play commands given at the appropriate time... And 2 plays do not cause a problem. A caveat of the jPlayer core fix would probably include the pause command cancelling the androidFix flag. ie., so you do not click pause real fast and then the fix starts it playing.
Good luck with your launch tomorrow.
Ron Eslinger
Mark Panaghiston
That link to GitHub... That is the master repository of the jPlayer source files. You can download them from there in a ZIP file or you can clone the repo itself using GIT... But I am now assuming that you do not have a clue what I'm talking about. Yes, now I'm being a GIT.
https://github.com/happyworm/jPlayer
The official releases can be found here:
https://github.com/happyworm/jPlayer/releases
Also, we have hidden away on the main jPlayer website, hidden on the main site navigation, the download page. This page has the original source for jPlayer 2.5.0 (at the moment) and many other files.
http://jplayer.org/download/
The link to GitHub is on our website in 2 places... The home page and the download page.
I must now apologize for being patronizing... Last night I'd stayed up an extra hour to try and help you, and now the wind went out my sails... I had hoped you'd be back here today saying it worked, rather than asking questions that are indicative of a "person" who did not event do a simple google search for the source. A search for "jPlayer source" and the download page comes up first in the results. Yeah, you were busy, but that is what you get paid for.
Ron Eslinger
Ron Eslinger
Mark Panaghiston
I think I'll look into adding it to the core. Two birds with 1 stone... Once I accepted that Android are not going to fix it, the solution seemed to become clear.
If you get time, solution B should be more robust... You may be making assumptions about your network bandwidth and then others may take that extra 200ms and go over the threshold and fail. Solution B automatically adjusts the delay, since the progress event happens when the audio can be played without causing an error.
Ron Eslinger
Mark Panaghiston
How did you achieve Solution A then?
Because Solution B is carried out on the same piece of code. This one here, the source code of the jPlayerPlaylist object definition jplayer.playlist.js that was linked to in the post on GitHub:
https://github.com/happyworm/jPlayer/blob/master/add-on/jplayer.playlist.js
Look at that code and re-read the Solution B instructions and you should be able to find the parts I'm talking about.
This weekend you should go out for a walk and smell some flowers. I'm going to myself, a walk along the canal and then down the river for a mile or two.
Healthy Visions
OK, sorry, Yes I need sleep, worked till 3 AM on another down server for Steel Plate Fabricators, then was back up at 5 AM.
I’ll test it out and let you know what I find.
Thanks again.
Healthy Visions
Great, that seems to do it as well. Nice and clean transition, with no jumping to the next track. Thank you very much and I hope that the next release will have these fixes so I don’t have to keep modifying the files.
I appreciate your help on this.
Here is a link to the droid app.
https://play.google.com/store/apps/details?id=com.healthyvisions.attackcancer
Also a link to the iphone app.
https://itunes.apple.com/us/app/attack-cancer/id815546224?mt=8
I appreciate your help and enjoy using your player. Very nice.
From: jpl...@googlegroups.com [mailto:jpl...@googlegroups.com] On Behalf Of Mark Panaghiston
Sent: Friday, February 14, 2014 10:27 AM
To: jpl...@googlegroups.com
Subject: Re: [jPlayer] Re: JPlayer , using android , not working
You worry me... I think you need a good nights rest.
Mark Panaghiston
I plan to incorporate those fixes into the jPlayer core... But I'm not sure on a time-scale just yet. I hope to look at this next week, but I have a feeling it might get pushed to the week after.
Have a nice weekend. You've earned it!
zlie...@denverlibrary.org
Healthy Visions
Thanks Mark, I noticed a new issue in this app after making the changes. I can click to a different track without having it jump to the next track, however, if I open the page and immediately click on Play prior to the track loading, it goes to the next track.
It happens every time. If I let it sit for a few seconds, it eventually loads and works great. But knowing people out there, they will go to the page and hit the play button, which always skips the first track and goes to the second track.
Is this the same issue with Droid? Is there a way to show a progress loading and prevent users from hitting the play button until it is actually ready to play? I am not sure what the process is when you first open the page, and it is loading the first track, then displays the time in the progress bar, which works when you hit the play button.
Any help would be great. We went live a couple weeks ago, and I’ve had complaints and people uninstalling the apps due to this issue. It has to do with slower networks like 3G. On wireless and 4G, it loads very quickly and doesn’t appear to be an issue.
From: jpl...@googlegroups.com [mailto:jpl...@googlegroups.com] On Behalf Of Mark Panaghiston
Sent: Friday, February 14, 2014 5:32 PM
To: jpl...@googlegroups.com
Subject: Re: [jPlayer] Re: JPlayer , using android , not working
Looking good Ron.
Mark Panaghiston
I'd like to be able to help, but I can only buy so many devices for testing. I can't help it if I only buy the good quality Android devices that work, such as the Nexus 7. Next time I will buy a Samsung, which I had associated with quality too, but maybe they only make quality LED displays and are riding on the coat tails of that success.
As to a solution... Looking at Solution B and thinking... When the user presses a button on the GUI, the play button, it does not uses that piece of code. It bypasses it completely in that case and talks directly to the jPlayer core... Hmmm... So if I pulled my finger out and applied this update to the core, then it might simply start working... But that is a guess and a hope... In practice, things are never that easy... For example, applying the fix to the core means that the preload option for Android must never be "none". In your case it is easy, I tell you not to do that, but the core library must assume people are stupid and have not read any instructions and just copied and pasted the code into a page and expect it to work. Hmmm... OK I'm ranting now... Focus!
A solution then... With solution B we have established that the play command is going direct to the core while the Android browser is "not ready" for the play. This corrupts the current track that was setup and - I assume the ended event fires - which causes the playlist to move to the next track through the playlist code, which does have the Android fix in it.
Short term band-aids then - This is only for Android:
1) We want to stop the user from being able to play before Android is ready... Well a crude way to do it would be to hide the GUI controls by default - ONLY THE GUI - and then show it when the progress event occurs.
In that first bit of code for solution B... Changes in red background. - OK, I'm adding pseudo code atm cause I do not have time right now...
if($.jPlayer.platform.android) {
// Create a progress event handler to fix android$(this.cssSelector.jPlayer).bind($.jPlayer.event.progress, function() {
if(self.androidFix) {self.androidFix = false;
$(this).jPlayer("play");
}
}});// Show the GUI here (when under Android.)
// Hide the GUI by default here (when under Android.)
To be library like, you'd want to get the cssSelectorAncestor and the cssSelector.gui from the jPlayer options and then use that. But if you only ever have 1 instance of the playlist, then you cann get away with just adding in the selector you use to the gui.
Ok thinking...
Inside jPlayer the gui jQuery selector is at:
this.css.jq.gui
Access that external, well inside the progress event using:
$(this).data("jPlayer").css.jq.gui
So put it together like this...
if($.jPlayer.platform.android) {
// Create a progress event handler to fix android$(this.cssSelector.jPlayer).bind($.jPlayer.event.progress, function() {
if(self.androidFix) {self.androidFix = false;
$(this).jPlayer("play");
}
}}).data("jPlayer").css.jq.gui.show(); // Hide the GUI by default here in the Android logicical clause.// Show the GUI here in the event (when under Android.)
$(this).data("jPlayer").css.jq.gui.show();
Other options... Erm... The all revolve around disabling the display until the Android can play it without screwing up.
Please investigate if the ended event is occurring and is the cause of the problem... If it is, then this fix should work. Let us know.
I will try and sort out the core, but I doubt i will be fast enough for you. Plus, you'd want to remove all those changes you'd added and start using an Edge version of jPlayer.
PS. The google group seems to complain about your posts...
Are you posting directly from emails?
I'm using the web page to post and it complains about your posts having emails in them.
Mark Panaghiston
if($.jPlayer.platform.android) {
// Create a progress event handler to fix android$(this.cssSelector.jPlayer).bind($.jPlayer.event.progress, function() {
if(self.androidFix) {self.androidFix = false;
$(this).jPlayer("play");
}
// Show the GUI here in the event (when under Android.)
$(this).data("jPlayer").css.jq.gui.show();
}}).data("jPlayer").css.jq.gui.hide(); // Hide the GUI by default here in the Android logicical clause.
The commet was correct, but I'd forgotten to change the .show() to a .hide() in the code that executes on page load. (Android)
Healthy Visions
Sounds great Mark, I will check it out and give you an update. I’ll play around with the different options and figure out which works best. I do appreciate your help on this and I will be happy to give you credit in my apps with the use of jPlayer for all your hard work in helping me make this a good app.
I will keep you updated, may be by tomorrow morning as I’m about to head out with the family.
Thanks
Healthy Visions
I tried this, but it appears to break the playlist. The list never shows up, and unable to play anything. I moved the code around some, but still no go. When I remark the hide() function, the playlist works, so It seems to be something with the hide function. In your example, you did not have $(this) before .data, which in dreamweaver showed it as an error, so I added $(this), but no go.
I’ll keep playing around with the functions.
if($.jPlayer.platform.android) {
// Create a progress event handler to fix android
$(this.cssSelector.jPlayer).bind($.jPlayer.event.progress, function() {
if(self.androidFix) {
self.androidFix = false;
$(this).jPlayer("play");
}
// Show the GUI here in the event (when under Android.)
$(this).data("jPlayer").css.jq.gui.show();
});
$(this).data("jPlayer").css.jq.gui.hide();
// Hide the GUI by default here in the Android logicical clause.;
Healthy Visions
I did add an alert where you have show and hide, and this works. It alerts me that the process is not ready when the page comes up, but then a few seconds later, I receive an alert that the audio is ready. I will see what I can do to disable the play button, or add a loading indicator.
Healthy Visions
I was able to get this to work with the use of a Loading image over the play button. So the user can’t click on the play button until the audio loads.
This is just a way to prevent the user from hitting the play button while it is still loading, on slow devices. The progress indicator over the play button helps as well to let the user know it is loading.
<li><div id="loadprog" style="background: url('loadin.gif');width:40px;height:40px;background-repeat:no-repeat;position:absolute;display: block;margin-left:5px;margin-top:5px;"></div><a href="javascript:;" class="jp-play" tabindex="1" style="display: block;">play</a></li>
if($.jPlayer.platform.android) {
// Create a progress event handler to fix android
$(this.cssSelector.jPlayer).bind($.jPlayer.event.progress, function() {
if(self.androidFix) {
self.androidFix = false;
$(this).jPlayer("play");
}
// Show the GUI here in the event (when under Android.)
//$(this).data("jPlayer").css.jq.gui.show();
//alert('ready to play');
document.getElementById('loadprog').style.display='none';
});
//alert('Not ready');
//$(this).data("jPlayer").css.jq.gui.hide();
document.getElementById('loadprog').style.display='block';
// Hide the GUI by default here in the Android logicical clause.;
}
Then I added this under the play: function(index) at the end of the file
if(0 <= index && index < this.playlist.length) {
if(this.playlist.length) {
this.select(index);
if($.jPlayer.platform.android) {
document.getElementById('loadprog').style.display='block';
//show progress image each time the track changes.
this.androidFix = true;
} else {
$(this.cssSelector.jPlayer).jPlayer("play");
}
Mark Panaghiston
A few points... My code did work, you just read it incorrectly. Look again:
if($.jPlayer.platform.android) {
}// Create a progress event handler to fix android$(this.cssSelector.jPlayer).bind($.jPlayer.event.progress, function() {
if(self.androidFix) {self.androidFix = false;
$(this).jPlayer("play");
}}).data("jPlayer").css.jq.gui.hide(); // Hide the GUI by default here in the Android logicical clause.// Show the GUI here in the event (when under Android.)
$(this).data("jPlayer").css.jq.gui.show();
$(this.cssSelector.jPlayer)In the event handler $(this) is equal to that. Outside the event handler, it could be many things, but in our case, it would be a jQuery wrapping of the jPlayerPlaylist instance object.How about you take 5 seconds to learn a little jQuery... For example, this line here:
document.getElementById('loadprog').style.display='none';
Could be written in jQuery like:
$('#loadprog').hide();
I only say that since jQuery is on the page anyway... Otherwise the pure JS is fine.
Healthy Visions
Still doesn’t seem to work. I did this exactly how you have it and it seems to break the page. I will keep it like it is with the loading indicator. I also added a message in the progress bar indicating the audio track is loading.
I’ve played with JQuery for years, but more of a Javascript, PHP, MySQL, and VB kind of guy. I started javascript back in 1997 and it tends to be easy for me to use and not have to look up anything. When they stop using javascript fully, and switch over to JQuery as a requirement, I will take some time to learn it fully.
For now, I don’t need to use it much, but do use PHP, HTML, Javascript, VB, ASP.net, and MySQL on a daily basis. JQuery is fun, and I use it in some of my complex websites for searching the MySQL database without having to repost/ reload the form values into PHP, or I can dynamically load information into a DIV from PHP / MySQL using JQuery. Works great.
Thanks for the advice, and as mentioned before, I will give you credit in our apps for use of JPlayer and your support. I do appreciate everything and look forward to newer players, and the future of JPlayer / JQuery.
Thanks
Mark Panaghiston
https://github.com/happyworm/jPlayer
Mark Panaghiston
http://jplayer.org/2.5.5/demos/
You can see the new jPlayer core in operation with the original Playlist code here:
http://jplayer.org/2.5.5/demo-02/
ie., The Playlist code changes described in this thread were applied to the core, instead of patching the operation of the playlist.
This area will be removed with jPlayer 2.6.0 goes live.
Steve
Thanks in advance!
Mark Panaghiston
I am surprised you have problems in the Nexus 5... The Google Devices run the best Android - well, from my niche media in the browser point of view. As in, Nexus devices use Chrome by default and work well.
The problem with the fix is, that Android should have fixed this rubbish 3 years ago. Just as I cave in and add the fix, those Samsung and other Android brands update to the 4.4+ versions and started working with the old code... As in, they FINALLY got the W3C Media Spec implemented well enough not to take a huge dump on itself when trying do change the media and play it. But those Nexus devices always worked and they work with or without the fix.
The only place I know it causes a problem, is when using Phone Gap... And we have plans to add an option to disable the fix for when using jPlayer with PhoneGap.
Steve
// jPlayer start
$(document).ready(function(){
$("#jplayer_1").jPlayer({
ready: function() {
$(this).jPlayer("setMedia", {
mp3: "../sounds/nature.mp3"
}).jPlayer("play");
var click = document.ontouchstart === undefined ? 'click' : 'touchstart';
var kickoff = function () {
$("#jquery_jplayer_1").jPlayer("play");
document.documentElement.removeEventListener(click, kickoff, true);
};
document.documentElement.addEventListener(click, kickoff, true);
},
loop: true,
swfPath: "http://jplayer.org/latest/js"
});
$(".sound-button").toggle(
function () {
$(this).attr({src:"../images/sound-button-off.gif"});
$("#jplayer_1").jPlayer("stop");
},
function () {
$(this).attr({src:"../images/sound-button-on.gif"});
$("#jplayer_1").jPlayer("play");
}
);
});
// jPlayer end
Steve
Healthy Visions
Hi Mark, I receive a lot of complaints on Droid devices that the audio starts playing for 5 to 10 seconds, then stops, then starts back up, then stops. I’ve not had this issue on my devices, but have seen on some LG devices. I’ve had a few complaints on iPad as well doing the same thing, or playing but no audio. Is there a way to download more of the audio track prior to playing so this could be avoided?
Let’s say a user clicks on the Play button, have it download for a few seconds, or a percentage before actually playing. These audio tracks are hypnosis tracks and I hate to hear that during their hypnosis session the track stops for a few seconds, then starts, and then stops again.
Any help on this would be great as I’m getting bad reviews and comments. Also in the release of IOS 7.1, it no longer displays the total time of the track until someone clicks on the play button. Just thought I would mention this.
Thanks
From: jpl...@googlegroups.com [mailto:jpl...@googlegroups.com] On Behalf Of Mark Panaghiston
Sent: Wednesday, March 12, 2014 6:51 AM
To: jpl...@googlegroups.com
Subject: Re: [jPlayer] Re: JPlayer , using android , not working
jPlayer 2.5.5 has been put online temporarily:
--
You received this message because you are subscribed to a topic in the Google Groups "jPlayer: HTML5 Audio & Video for jQuery" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/jplayer/MMm3BXFShqc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to jplayer+u...@googlegroups.com.
To post to this group, send email to jpl...@googlegroups.com.
Visit this group at http://groups.google.com/group/jplayer.
For more options, visit https://groups.google.com/d/optout.