Html – Embedding HTML5 video for Mobile Safari on an iPhone 3GS vs an iPhone 4

h.264htmliosiphonevideo

I have an H.264/AAC encoded video in an mp4 file on the server, the mime-type video/mp4 is added to the web server (IIS 7), and I have a page with a video tag:

<video id="html5-video" width="360" height="202" poster="/images/poster.png" controls>
    <source src="/video/Web-360x202-14MB.mp4" type="video/mp4">
</video>

Works great on an iPhone 4, but on an iPhone 3GS (same iOS version, 4.3.2) is only shows the poster image and tapping it doesn't start the video.

When I try to open the video file directly, I get a 'tip' from the Mobile Safari developer console:

Other Tip

QuickTime

Movie could not be played

What is needed to get HTML5 video working on an iPhone 3GS? Is it an encoding issue?

Best Answer

I've experienced the same issue and yes it seems that it's an encoding issue. I followed the Universal Smartphone profile provided here :

Defaults:

Video: H.264, Level 3.0, Baseline profile Audio: AAC, 1-2 channels

Plays on:

iOS: iPhone, iPad, Apple TV, iPod Touch, iPod Classic, iPod 5.5G Blackberry: Bold 9000, Curve 8910, 8900, 8520, Pearl 9XXX, Storm, Storm 2, Torch, Tour, Bold 9650 + 9700 Android: All (?) Other: PSP (3.30+), PS3, Xbox 360, web

Doesn’t play on:

iPod 5G, PSP (pre-3.30), Blackberry Curve 9330, 9300, 8530, 83XX, Pearl 8XXX, 88XX

Settings:

Defaults, plus:

audio_bitrate: 128 (or less) audio_sample_rate: 44100 (or less) size: 480×320 max_frame_rate: 30 video_bitrate: 1500 (or less)

http://blog.zencoder.com/2010/09/30/how-to-encode-video-for-mobile-use/

and it solved the problem. My mp4 file can now be read both on iPhone 3gs and 4.

Related Topic