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

Question

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?

Answer 1

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.

Answer 2

If you are getting this symbol

for your HTML <video> element on an iPhone 3GS or iPhone 4 it's because those phones will only play HTML videos if:

• There is a <source> that is a MP4 encoded with MPEG-4 H.264 Video Level 3 Baseline Profile + AAC Audio
• The resolution does not exceed the limit for the particular phone (see specs below)

I tried the iPhone profile on Miro Video Converter and it didn't work. The easiest transcoder I've found that will convert to this format is HandBrake. Just transcode using the iPod preset for 3GS support and iPhone & iPod preset for iPod 4+ support with higher resolution.

iPhone 4 specs from Apple:

Video formats supported: H.264 video up to 720p, 30 frames per second, Main Profile level 3.1 with AAC-LC audio up to 160 Kbps, 48kHz, stereo audio in .m4v, .mp4, and .mov file formats; MPEG-4 video, up to 2.5 Mbps, 640 by 480 pixels, 30 frames per second, Simple Profile with AAC-LC audio up to 160 Kbps per channel, 48kHz, stereo audio in .m4v, .mp4, and .mov file formats; Motion JPEG (M-JPEG) up to 35 Mbps, 1280 by 720 pixels, 30 frames per second, audio in ulaw, PCM stereo audio in .avi file format

https://support.apple.com/kb/SP587?viewlocale=en_US&locale=en_US

iPhone 3GS specs from Apple:

Video formats supported: H.264 video, up to 1.5 Mbps, 640 by 480 pixels, 30 frames per second, Low-Complexity version of the H.264 Baseline Profile with AAC-LC audio up to 160 Kbps, 48kHz, stereo audio in .m4v, .mp4, and .mov file formats; H.264 video, up to 2.5 Mbps, 640 by 480 pixels, 30 frames per second, Baseline Profile up to Level 3.0 with AAC-LC audio up to 160 Kbps per channel, 48kHz, stereo audio in .m4v, .mp4, and .mov file formats; MPEG-4 video, up to 2.5 Mbps, 640 by 480 pixels, 30 frames per second, Simple Profile with AAC-LC audio up to 160 Kbps, 48kHz, stereo audio in .m4v, .mp4, and .mov file formats Support for 576p and 480p with Apple Component AV Cable; 576i and 480i with Apple Composite AV Cable (cables sold separately)

https://support.apple.com/kb/SP565?viewlocale=en_US&locale=en_US

Answer 3

I was experiencing the same issue but all these fixes weren't working. What did work eventually was to remove the htaccess protection I was using for those files. The previous answer is right, but this will fix any htaccess security problems.

AuthName "myusername"
AuthType Basic
AuthUserFile /Library/WebServer/.htpasswd

Require valid-user

<FilesMatch mp3>
Satisfy any 
order allow,deny 
allow from all 
</FilesMatch> 

<FilesMatch mp4>
Satisfy any
order allow,deny
allow from all
</FilesMatch>

<FilesMatch aac>
Satisfy any
order allow,deny
allow from all
</FilesMatch>

<FilesMatch m4v>
Satisfy any
order allow,deny
allow from all
</FilesMatch>

<FilesMatch m4b>
Satisfy any
order allow,deny
allow from all
</FilesMatch>