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, i386Duration: 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.
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.