MP4 video unable to play on tablet/mobile

Question

Is there a possibility to play a MP4 video on iPad? I created a website for a client, with a teaser video on the front-page. I have done this with the HTML5 tag video, like so:

<video autoplay loop muted>
    <source src="video/teasermauricedraait.webm" type="video/webm">
    <source src="video/teasermauricedraait.mp4" type="video/mp4">
</video>

Above code is working as aspect on desktop, but on tablet (iPad) and mobile (iPhone) the video isn't displayed.

Tried also to add another line of source code, but this doesn't fix the issue: <source src="video/teasermauricedraait.mov" type="video/mov">

What does I do wrong?

Answer 1

MP4 is a 'container' specification for video and audio steams and the videos and audios in the container may use different encodings.

The subset that is supported on an iPAD is definined here: - https://developer.apple.com/library/ios/documentation/Miscellaneous/Conceptual/iPhoneOSTechOverview/MediaLayer/MediaLayer.html

the relevant extract is:

iOS supports many industry-standard video formats and compression standards, including the following:

• H.264 video, up to 1.5 Mbps, 640 by 480 pixels, 30 frames per second, Low-Complexity version of the H.264 Baseline Profile with AAC-LC audio up to 160 Kbps, 48 kHz, stereo audio in .m4v, .mp4, and .mov file formats
• H.264 video, up to 768 Kbps, 320 by 240 pixels, 30 frames per second, Baseline Profile up to Level 1.3 with AAC-LC audio up to 160 Kbps, 48 kHz, 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, 48 kHz, stereo audio in .m4v, .mp4, and .mov file formats
• Numerous audio formats, including the ones listed in Audio Technologies

Your case is slightly more complicated in that the video is in a browser on the device - you may not want this automatically to play on a Mobile device as with some price plans you may be running up data costs for your users - this is a key reason auto play of videos on mobile devices is not historically supported. There are various workaround people have tried but I'm not sure there is one that works universally, and you really need to think about whether you actually want to do this.

If the video will not play at all, even when the user clicks play then a common problem which can cause a video to play fine in a browser but not on an iOS device (especially older ones) is the profile of the h.264 video - you can see above that 'baseline' is supported.

This can be checked with tools like ffprobe (https://www.ffmpeg.org/ffprobe.html) if you are familiar with it. If not and you are able to post a link to your video in the comments here others can check for you.