mp4 video not playing on ipad or iphone

[brandozz]

Hi all,

I'm developing a website and have a video on the homepage. I'm trying to use html5 video but my mp4 file will not play. Here are the video specs:

Format: H.264, 548 x 308, AAC, 48000Hz
FPS: 29.97
Data Size: 34 MB
Data Rate: 414.81 kbit/s

<video class="glf_video" controls="controls" autoplay>
                <source src="https://www.mydomain.com/videos/video.mp4" type="video/mp4" />
                <source src="https://www.mydomain.com/videos/video.webm" type="video/webm" />
                <source src="https://www.mydomain.com/videos/video.ogv" type="video/ogg" />
                <object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="548" height="308" >
                    <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
                    <param name="allowFullScreen" value="true" />
                    <param name="wmode" value="transparent" />
                    <param name="flashVars" value="config={'playlist':['https%3A%2F%2Fwww.getlowfees.com%2Fimg%2Fvideo.jpg',{'url':'https%3A%2F%2Fwww.mydomain.com%2Fvideos%2Fvideo.mp4','autoPlay':false}]}" />
                    <img src="https://www.mydomain.com/img/video.jpg" title="No video playback capabilities, please download the video below" />
                </object>
</video>

 

[SrWebDeveloper]

What you actually have is an HTML5 video tag with Flash fallback.

Your markup looks fine, I just want to point out that Flash is not supported on Safari (iphone/ipad) but I don't see any obvious reason the MP4 (which is H.264/ACC) would not play on those devices.

To clarify - it works on other devices or your Mac without issue using the same code, or you tested locally first? It would be very helpful to know what happens when it doesn't play, note any errors or behaviors in your next reply and if the controls display at all.

Beyond this, assuming paths are right and the video plays in other browsers just fine to confirm the video itself is not to blame, please confirm no issues with certificate setup or SSL/TLS as I noticed you're using https.

My only other advice for now is cosmetic - add width and height to the video tag and see if it's an issue of sizing. You might also consider an alternative approach, i.e. host the video on Brightcove or maybe use VideoJS framework which is very cross browser and platform compliant.

 

[Tim Olson]

What do you see on page load?
If you see a video box with a play button that is not clickable (often including a slash and round sign for prohibited), the problem is the video and how it was encoded.
A cheap way to verify iPhone/ipad compatibility is to load video in drop box, then open on iDevice. If it plays there it should also play on site.
Be sure and choose the "quick start" option when encoding. This puts moov atom up front and video plays quicker.
iOS won't show a play button until video loads, so it matters.
If the video is fine, the code is the problem.