jPlayer works on iPhone OS 4.0 and iPad

[Maboa]

Yesterday I tried jPlayer on the beta version of iPhone OS 4.0 and I'm
happy to report that it plays the audio in-page and I'm pretty sure
autoplay works too. Apparently this is also the case on the iPad
(although I haven't tried it). Anyone want to confirm this?

Mark B

[Richard Hulse]

Does this mean OS4 supports Ogg, because it does not support flash?

> --
> You received this message because you are subscribed to the Google
> Groups "jPlayer: the CSS styleable jQuery audio player plugin" 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
> .
>

[Mark P]

Hello Richard,

Maboa would have to confirm for OS 4.0... But I know that the current
iPhone OS supports MP3 files and those are being used. The iPhone
launches its own player to play audio, so jPlayer is kinda bypassed
and just provides the new <audio> info and the Mobile Safari browser
and built in player does the rest when a user clicks play.

NB: The user has to click play! You cannot auto play.

Best regards,
Mark P.

On Apr 11, 12:55 am, Richard Hulse <richard.l.hu...@gmail.com> wrote:
> Does this mean OS4 supports Ogg, because it does not support flash?
>

[Richard Hulse]

Sorry for being thick, but does this mean you can have an MP3 in an
audio tag on OS4 ? Or does the OS just provide a player over the top
of a raw MP3 link?

[Maboa]

I only had brief access to an iPhone with OS4, so didn't get a chance
to see how it dealt with just an mp3 in an audio tag, although I'm
guessing it now does what other versions of Safari do which is display
a simple player. I also presume that it supports mp3 and WAV.

Cheers

Mark B

[YWFTDG]

Hello Mark,
About to launch the live version of working with your player for the
past month or so, started testing it on iPad today. It works, but
there are some bugs which sort of hinder it a little odd. My player is
not set to autoplay, but when I press play the first track does not
start. But if I select (click) on the next track in the playlist, or
click the next button in player, then it gets rolling. I even
downloaded your latest version 1.1.0 and still getting the same
issues. So it works, but many users might think the website is not
loading or something, as it will just sit there unless they change to
next track..

Any thoughts? Seen this before? + The player works fine in Safari/FF
on normal desktops...

[YWFTDG]

never mind, I now see in your docs about they must click something and
issues with this already...will see what we can do to work around,
cheers!

[YWFTDG]

Ok, so I found a nasty little hack way to fix this play button issue
on iPad. The issue seems with that whole no touchevents, etc. So, I
needed to find a way to sort of start, then stop. So I noticed if I
did autoplay, that did not work but when puasesed, and pressed again
the player would start playing. The previous problem was with no
autostart, no matter how times I pressed play/pause it would never get
going untill I clicked a track or next track button.

So, I set it to first check if this device is an ipad:

------
var isiPad = navigator.userAgent.match(/iPad/i) != null;
------

Second, I then do a if/else statement to do the autostart check in the
ready statement:

------
if (isiPad ==true) {
playListInit(true);
} else {
playListInit(false);
}
------

Then right after the ready statement, I do the statement again, haha:
------
if (isiPad==true) { $j("#jquery_jplayer").jPlayer("pause"); }
------

The results, the dang play button works now on iPad device!
Fun stuff, hope this helps someone...

[Jordan Robert Dobson]

You can take a peek at what I did for ipad at least here: http://HarryShearer.com/news/le_show/player/

I still need to tweek things a bit for iPhone but the iPad works great.


--
Jordan Dobson • Mobile
(425) 444-8014

> For more options, visit this group at http://groups.google.com/group/jplayer?hl=en

[Maboa]

Great that it can be made to work! Obviously the 'iTouch' devices are
a great platform for jPlayer. The problem is being in Europe we
haven't got iPads yet so can't test properly. We're gonna join the
Apple developers program so we can play about with iPhone OS4.0 and
iPad emulator, but need to upgrade to Snow Leopard first. I'd kinda
been putting it off as I'd heard of different issues with it but I
expect to upgrade next week.

Hopefully based on what developers like yourselves have discovered we
can build in support for the iPad etc in future releases so keep up
the good work :)

Cheers

Mark B

On Apr 29, 6:25 am, Jordan Robert Dobson

<Jordan.dob...@madebysquad.com> wrote:
> You can take a peek at what I did for ipad at least here:http://HarryShearer.com/news/le_show/player/
>
> I still need to tweek things a bit for iPhone but the iPad works great.
>
> --
> Jordan Dobson • Mobile
> (425) 444-8014
>

[Jordan Dobson]

The iPad emulator works exactly like the device does... so that's
definitely the way to go.

It's pretty awesome that it plays the audio in the background as
well... so you can move onto reading an iBook, check emails or
whatever... until you use another audio related app. :)

--
Jordan Dobson
Owner + Director
MadeBySquad.com | GlueNow.com | SquadBlog.com
(425) 444-8014

Follow me on twitter at http://Twitter.com/JordanDobson

[Maboa]

Music to my ears :P Thanks Jordan.

> > For more options, visit this group athttp://groups.google.com/group/jplayer?hl=en.

>
> --
> Jordan Dobson
> Owner + Director
> MadeBySquad.com | GlueNow.com | SquadBlog.com
> (425) 444-8014
>

> Follow me on twitter athttp://Twitter.com/JordanDobson

>
> --
> You received this message because you are subscribed to the Google Groups "jPlayer: the CSS styleable jQuery audio player plugin" group.
> To post to this group, send email to jpl...@googlegroups.com.
> To unsubscribe from this group, send email to jplayer+u...@googlegroups.com.

[YWFTDG]

The last issue I am having with my player on the iPad is when the
track is finished, it will not properly skip the to next one. Right
now I just have it pause so it doesn't look broken, but its annoying
process for short audio files:

.jPlayer("onSoundComplete", function() {
playListNext();
if (isiPad ==true) {

$j("#jquery_jplayer").jPlayer("pause");
}

});

You can see how we are using the code at: http://www.youworkforthem.com/product.php?sku=K0001
Any thoughts on how to fix the onsoundcomplete issue? I looked at your
code Jordan, but not sure
how you resolved this? I am only concerned with iPad, not iphone.

Btw, yeah the jplayer performs great on the ipad though, very nice to
skip the whole flash process of things.


-Michael

[Jordan Robert Dobson]

Replies inline below...

--
Jordan Dobson • Mobile
(425) 444-8014

On Apr 29, 2010, at 8:02 PM, YWFTDG <thedesig...@gmail.com> wrote:

> The last issue I am having with my player on the iPad is when the
> track is finished, it will not properly skip the to next one. Right
> now I just have it pause so it doesn't look broken, but its annoying
> process for short audio files:

I could never get onSoundComplete to fire in my version.

>
> .jPlayer("onSoundComplete", function() {
> playListNext();
> if (isiPad ==true) {
> $j("#jquery_jplayer").jPlayer("pause");
> }
> });
>
> You can see how we are using the code at: http://www.youworkforthem.com/product.php?sku=K0001
> Any thoughts on how to fix the onsoundcomplete issue? I looked at your
> code Jordan, but not sure
> how you resolved this? I am only concerned with iPad, not iphone.
>

It was tricky! Look at my code inside the onProgressChange event
handler.

It wouldn't detect sound complete. I thought that was because it was a
stream. But maybe it just doesn't work. :(

Esentially what I did was check and record the playTime every 1.5
seconds with the last recorded time, if it was playing. So if the time
hadn't changed at all and was considered "playing" the track was
complete.

Not the most elegant solution but it works!

Hope this helps.

>>> --
>>> Jordan Dobson
>>> Owner + Director
>>> MadeBySquad.com | GlueNow.com | SquadBlog.com
>>> (425) 444-8014
>>
>>> Follow me on twitter athttp://Twitter.com/JordanDobson
>>
>>> --
>>> You received this message because you are subscribed to the Google
>>> Groups "jPlayer: the CSS styleable jQuery audio player plugin"
>>> 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 athttp://groups.google.com/
>>> group/jplayer?hl=en.
>>
>> --
>> You received this message because you are subscribed to the Google
>> Groups "jPlayer: the CSS styleable jQuery audio player plugin" 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 athttp://groups.google.com/group/
>> jplayer?hl=en.
>
> --
> You received this message because you are subscribed to the Google
> Groups "jPlayer: the CSS styleable jQuery audio player plugin" 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
> .
>

--

[Mark P]

Interesting reading through this discussion... I'm not sure how
contribute until I get access to the iPad or the emulator, but one
thing did spring to mind.

jPlayer does not add the new Audio() object to the HTML until after
the first play command is issued. Adding the new Audio object to the
HTML is like adding an <audio> tag, but it solved a problem with the
operation in Opera, which did not like us just adding the <audio> tag
and required the new Audio() created first and then added.

So... My thinking is, the <audio> is not present when the user touches
play that first time. Once the <audio> tag is in the page once, the
iPad accepts the following play commands. Which was why Michael did a
JavaScript play and then pause for the iPad.

I am not sure why the next button works *before any other touch
command given* ie., before clicking the play button. I assume it works
after a play button was clicked because an <audio> was in the actual
page and is just being replaced when you click next and then auto-
playing via JavaScript.

In jPlayer, the <audio> HTML is not added to the page until the play
command is given, because some HTML5 browsers were pinging the audio
file the moment the <audio> element appeared in the page, regardless
of whether it was to play or not. This was annoying some jPlayer
users, who did not want the audio file touched at all before the file
was actually played. I believe it was Firefox that was the worst
offender here, pinging the OGG files 3 times before you even tried to
play it.

At the moment, jPlayer checks for IE browsers and does something
special for them... Maybe we need to review the case for the iPad and
iPhone bowsers so that the <audio> element is added to the page
immediately and not delayed until the user clicks play. This would not
affect the auto-play at initial page load, since a user touch would
still be required. ie., the external JavaScript must not try and auto-
play on the iPad.

This auto-play problem is related to the onSoundComplete auto-playing
the next song. Again, a user touch is required to cause the audio to
play.

It is not helped that the HTML5 draft spec does not allow for feedback
from the HTMLAudioElement.play() command. It simply returns a void in
all case. Unfortunately, this means that jPlayer is oblivious to
whether it actually worked or not.

Best regards,
Mark P.

On Apr 30, 4:33 am, Jordan Robert Dobson

<Jordan.dob...@madebysquad.com> wrote:
> Replies inline below...
>
> --
> Jordan Dobson • Mobile
> (425) 444-8014
>

> ...
>
> read more »

[Richard Hulse]

Hi Mark

A couple of comments.

Why not create the tag, but not put anything in it? You can still call
canPlayType on blank audio elements.

Also, you could use network events to determine if the (just added)
audio was loading and valid. I think you could use these and the ready
event stares to be pretty sure play will work.

There is also a play event that fires after a call to play().
Presumably they only fire the event if the audio does actually play!

I hope that is usefull.

Cheers,
Richard

[Patrick]

Hi there,

could someone post a working version of the whole javascript for iPad?
That would be really great!

On 8 Mai, 03:34, Richard Hulse <richard.l.hu...@gmail.com> wrote:
> Hi Mark
>
> A couple of comments.
>
> Why not create the tag, but not put anything in it? You can still call  
> canPlayType on blank audio elements.
>
> Also, you could use network events to determine if the (just added)  
> audio was loading and valid. I think you could use these and the ready  
> event stares to be pretty sure play will work.
>
> There is also a play event that fires after a call to play().  
> Presumably they only fire the event if the audio does actually play!
>
> I hope that is usefull.
>
> Cheers,
> Richard
>

> ...
>
> Erfahren Sie mehr »