iPad Doesn't Render H.264 Video with HTML5

Question

I have some H.264-encoded videos which render in HTML5 correctly in the web browser, but do not render correctly on the iPad. When I use a H.264 video I downloaded off the internet, my video renders correctly on the iPad, so it is not an HTML problem.

Here is the ffmpeg info about my videos --

My original .mov video:

Seems stream 1 codec frame rate differs from container frame rate: 6000.00 (6000/1) -> 30.00 (30/1)

Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'a_video.mp4':

Metadata:

major_brand     : qt  
minor_version   : 537199360
compatible_brands: qt  

Duration: 00:00:42.74, start: 0.000000, bitrate: 220 kb/s

Stream #0.0(eng): Audio: aac, 44100 Hz, stereo, s16, 94 kb/s
Stream #0.1(eng): Video: h264, yuv420p, 762x464, 122 kb/s, 30 fps, 30 tbr, 3k tbn, 6k tbc

After using Handbrake to convert my .mov to a mp4, yet doesn't render on the iPad:

Seems stream 0 codec frame rate differs from container frame rate: 180000.00 (180000/1) -> 29.97 (30000/1001)

Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'a_video.m4v':

Metadata:

major_brand     : mp42  
minor_version   : 0
compatible_brands: mp42isomavc1  
encoder: HandBrake 0.9.5 2011010300  

Duration: 00:00:42.77, start: 0.000000, bitrate: 169 kb/s

Stream #0.0(und): Video: h264, yuv420p, 752x464 [PAR 381:376 DAR 381:232], 35 kb/s, PAR 145161:141376 DAR 145161:87232, 29.97 fps, 29.97 tbr, 90k tbn, 180k tbc
Stream #0.1(eng): Audio: aac, 44100 Hz, stereo, s16, 128 kb/s

Here is a .mp4 I found online which does render on the iPad:

Seems stream 1 codec frame rate differs from container frame rate: 180000.00 (180000/1) -> 25.00 (25/1)

Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'a_video_3_emu.mp4':

Metadata: major_brand : M4VP
minor_version : 1
compatible_brands: M4VPM4A mp42isom
encoder : CoreMediaAuthoring 677, CoreMedia 420.17, i386

Duration: 00:01:38.01, start: 0.000000, bitrate: 1023 kb/s

Stream #0.0(und): Audio: aac, 32000 Hz, mono, s16, 97 kb/s
Stream #0.1(und): Video: h264, yuv420p, 480x360 [PAR 1:1 DAR 4:3], 914 kb/s, 25 fps, 25 tbr, 90k tbn, 180k tbc

Does anyone see something wrong with the way I am encoded my videos?

Edit

At first my theory was that the iPad was sensitive to different container formats; but that appears not to be the case. I took a video which does render correctly on the iPad and converted it to a .mov, and it still played correctly on the iPad. So there must be a problem with how the iPad deals with the underlying H.264 stream.

Answer 1

If you have a H.264 video stream -- regardless of the container (mov, m4v, mp4) -- and your HTML5 video renders in a web browser but doesn't render on the iPad, there are two possible fixes:

The first solution is to convert the H.264 video stream to mpeg4.

ffmpeg -i video_h264_not_working.mov -acodec copy -vcodec mpeg4 video_mpeg.mov

(Alternatively, you can select MPEG4 instead of H.264 in Handbrake.)

The second solution is to re-process the H.264 video with the following parameters:

ffmpeg -i video_h264_not_working.mov -vcodec libx264 -r 25 -b 516k -bt 516k -crf 22 -vpre normal video_h264.mov

The second solution came from: http://houseoflaudanum.com/navigate/howtos/html5-video-no-webm/

I'm guessing in the former case, the mpeg4 codec is more relaxed on the iPad; and in the latter case, the iPad didn't like some of the stream parameters from the original H.264 encoding, so a "cleaning" was necessary.

To determine what your video stream actually is, just do ffmpeg -i myvideo.mov.

Answer 2

I've had great success encoding and transcoding HTML5 video using the free Miro Video Converter (OS X, Windows) as recommended in the Video on the Web section of Dive Into HTML5 by Mark Pilgrim.

Miro Video Converter can convert virtually any video file to MP4, Theora, or MP3 (the audio only). It has presets that will convert video to the correct sizes and formats for popular phones, iPods, and other media players. Just convert your video and copy it to your device.

It's a super simple way to convert almost any video to MP4, WebM (vp8), Ogg Theora, or for Android, iPhone, and more. You'll feel good that it's 100% Free and open-source, too.

An another veritable video conversion utility is Video Monkey, a free video encoding application exclusively for Mac. It was created after the demise of the great tool Visual Hub. Video Monkey borrows heavily from the Visual Hub video conversion tool, both conceptually and from the original code dump posted to SourceForge as TranscoderRedux.