Html – iPad Doesn’t Render H.264 Video with HTML5

ffmpeghtmliosipadvideo-encoding

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, 752×464 [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, 480×360 [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.

Best Answer

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.

Related Topic