Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

HTML5 Player works in web browsers, but not on iPhone

I'm testing the HTML5 player beta, and it appears to work fine in Firefox, Safari, etc., however, when accessing with an iPhone 3G, I see a gray box with quicktime symbol in lower right corner and the play button has a circular cross symbol on top of it.

Any ideas?

Code source:
===========
<script type="text/javascript" src="/inc/jwplayer5/jquery.jwplayer.js"></script>
<script type="text/javascript">
$('#myplayer').jwplayer({
flashplayer:'/inc/jwplayer5/player.swf',
skin:'/inc/jwplayer5/five/five.xml'
});
</script>

<video tabindex="0" id="myplayer" src="/assets/H3S4.mp4" width="480" height="270"></video>
============

Again, it plays fine in FF/Safari (fallback possibly?), but not when viewing page with iPhone.

20 Community Answers

Up Down

JW Player

User  
0 rated :

Couple notes:

- I have jquery 1.4.2 in head tag.
- The video tag is placed above the scripts (source below).
- codec is specified (I have tried with and without)
- iPhone still shows quicktime emblem in lower right corner of gray box, with crossed out play button (circle with line through it).


Code source:
===========
<video tabindex="0" id="myplayer" src="/assets/H3S4.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'" width="480" height="270"></video>
<script type="text/javascript" src="/inc/jwplayer5/jquery.jwplayer.js"></script>
<script type="text/javascript">
$('#myplayer').jwplayer({
flashplayer:'/inc/jwplayer5/player.swf',
skin:'/inc/jwplayer5/five/five.xml'
});
</script>
============

Please let me know if you need more information. Thanks.

Up Down

JW Player

User  
0 rated :

Same problem here. I suspect it's a video encoding issue though because even when I enter the URL to the video the quicktime player won't display it. I've followed all the recommendations when encoding mp4 video but I must still be doing something wrong. I suspect you are as well.

Up Down

JeroenW

JW Player Support Agent  
0 rated :

The iPhone (and iPad) is one of our test platforms for the HTML5 player, so things should work just fine.

The iPhone only supports MP4 in the Baseline profile, up to 640×480 pixels. Both the Main and High profile are not supported. I suspect your videos are in Main profile then.

To be really sure, you can do a test with the MP4 video we use <a href="/support/jw-player/jw-player-for-html5/11895/single-mp4-video">in this example</a>. That video can play on the iPhone.

Up Down

JW Player

User  
0 rated :

Thanks. Do you know any converters, that you would recommend? I need to convert FLV to MP4, to be used on iPhone, but most of the software I've tested has not worked well.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

This isn’t for FLV conversion, but HandBrake is a great converting/encoding program. www.handbrake.fr

Up Down

JW Player

User  
0 rated :

I have a specific need to convert FLV to MP4, but most of the conversion software I've used (eg. flvtomp4converter), have failed to work properly. Any recommendations for free or paid software to convert flv to mp4, along with other formats converting to MP4?

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

I have not personally used this program before, but maybe it will work for you – http://blog.mypapit.net/2008/04/flv2mpeg4-convert-flv-to-mpeg4.html

Up Down

JW Player

User  
0 rated :

I'll check it out.

RE: the video conversion to baseline, I was able to produce MP4s in a playable format, and it appears to work. If I understand correctly, when using an iPhone, the player just opens the MP4 in same fashion as accessing an MP4 directly on iPhone (not really in the embedded player). Would that be accurate assessment? It does appear, however, that the iPad will play the MP4 in the embedded player.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

@Aaron, that is correct. The iPhone will just play the MP4 directly in the iPhone’s player, that’s just how it works. With the iPad, it will play it in the embedded player.

Up Down

JW Player

User  
0 rated :

I'm testing out the HTML5 player as well and am having this same issue. I don't think it's a video encoding issue. When the video tag includes the src of the video like this, then the video plays just fine:

bc.. <video width="640" height="360" poster="example.jpg" id="player" src="example.mp4" type="video/mp4"></video>



However, when the video tag has the source tag to play both an .mp4 and an .ogv video like this, then video doesn't play:

bc.. <video width="640" height="360" poster="example.jpg" id="player">
<source src="example.mp4" type="video/mp4">
<source src="example.ogv" type="video/ogg">
</video>



You can even test this on your own site. Visit this page on the iPhone, and the video will not play:
http://www.longtailvideo.com/support/jw-player/jw-player-for-html5/11896/mp4-plus-ogg-video

Visit this page on the iPhone, and the video will play:
http://www.longtailvideo.com/support/jw-player/jw-player-for-html5/11895/single-mp4-video

This is exactly the same behavior I'm experiencing on my site where the video won't play if the source tags are included but will play if the src to the video is in the video tag.

Up Down

JW Player

User  
0 rated :

I am having the same issue as Anacheata. When I include the src="bunny.mp4" in the video tag it plays fine on the iPhone and downgrades to Flash on the platforms that don't support mp4. But when i try to include multiple sources {mp4 and ogv) I get the cross through the player on the iPhone and it won't play. It's as if the mp4 loads properly but the ogv video gets overlayed on top and won't allow playback. I've tried reversing the order of the sources but that didn't make a difference either.

Up Down

JW Player

User  
0 rated :

Actually, I'm having the same problem on multiple iPhones (3.1.3), and the demos on your site are displaying exactly the same with the crossed out play button.

Up Down

JW Player

User  
0 rated :

Can you share the mencoder command to generate mp4 with the baseline profile. I am also facing the same issue like the generated mp4 from flv plays in other players but not in iphone.

Up Down

JW Player

User  
0 rated :

Using that mencoder command also generated high profile instead of baseline profile. Modifying the encoding parameters as that of the example link in the JeroenW's reply generated baseline profile video and plays in iPhone. Thanks.

Up Down

JW Player

User  
0 rated :

I used my Iphone 4 and loaded this page that you say works:
http://www.longtailvideo.com/support/jw-player/jw-player-for-html5/11895/single-mp4-video
but it doesn't.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

@Dean – The Beta HTML5 player created before iOS4 was introduced, and it does not work on iOS4. The 1.0 release will fix this issue.

Up Down

JW Player

User  
0 rated :

Whats is the exact URL to download this Sample example video "/files/bunny.mp4" so that i can test my HTML5 code on iPad and Phone?
thanks,

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Here ;)

http://www.longtailvideo.com/jw/upload/bunny.mp4

Up Down

JW Player

User  
0 rated :

Is there a way to play the videos inline in the HTML5 player in iPhone instead of the Movie Player. I have tried removing the poster attribute , still it plays in QucikTime player

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

@agtest – This is just how the iPhone works, it will always play files in the default QT player.

This question has received the maximum number of answers.