No matter what I do, I cannot get my MP4 <video> to play on Safari/iPad

Question

Been tackling this one for hours now. Not sure what I am doing wrong at this point.

<video controls="controls" >
<source src="cute.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="cute.webm" type="video/webm" />
<source src="cute.theora.ogv" type="video/ogg" />
</video>

In safari it just says "loading..." and on iPad it's a blank black box. It works in Firefox.

I tried exporting the video multiple times with specific settings

(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, 48kHz, stereo audio in .m4v, .mp4, and .mov file formats.) I got these specs from another question/answer on this website. I tried my best to export with these settings in FCP, but no go.

Any suggestions? I can't really download any conversion software on the computer I am on now but I could use an online tool, or step-by-step instructions to encoding this damn thing correctly.

Thank you.

are you expecting the video to play automatically, if you are you need to add the 'autoplay' attribute — Antony Scott

Jörn Berkefeld Jörn Berkefeld · Accepted Answer · 2012-02-05T10:09:48

2 possible reasons:

first, get rid of the "; codecs="avc1.42E01E, mp4a.40.2" in the type as it has no benefits (and might actually cause problems)
check the encoding of your mp4 file and make sure it was done according to this spec: https://developer.apple.com/library/archive/documentation/NetworkingInternet/Conceptual/StreamingMediaGuide/FrequentlyAskedQuestions/FrequentlyAskedQuestions.html#//apple_ref/doc/uid/TP40008332-CH103-SW1

Quote:

Video: H.264 Baseline Level 3.0, Baseline Level 3.1, and Main Level 3.1.

Audio:

HE-AAC or AAC-LC up to 48 kHz, stereo audio

MP3 (MPEG-1 Audio Layer 3) 8 kHz to 48 kHz, stereo audio

Note: iPad, iPhone 3G, and iPod touch (2nd generation and later) support H.264 Baseline 3.1. If your app runs on older versions of iPhone or iPod touch, however, you should use H.264 Baseline 3.0 for compatibility. If your content is intended solely for iPad, Apple TV, iPhone 4 and later, and Mac OS X computers, you should use Main Level 3.1.

most common error is not to use "Baseline" encoding but instead "extended" or "high" for the video

No matter what I do, I cannot get my MP4 <video> to play on Safari/iPad

2 Answers