MP4 Videos not Playing on Mobile Phones

Supporting Mobile Video on Your Site

https://www.jwplayer.com/blog/supporting-mobile-video-on-your-site/


Update: JW7 is now available. Check it out here.
One of the most often asked questions when discussing transcoding is How do I support iPads, iPhones and Android devices?. The goal of this blogpost is to remove some of the mystery behind transcoding for devices and present a solution that will work across a wide range of them.

The Problem

Many popular video formats, like FLV or WMV, will not play on devices like the iPhone. Even videos encoded in MP4 may not play back, resulting in the following screen:

Error playing video on an iPhone
The underlying issue is processing power. Today’s desktop computers and laptops are powerful enough to decode just about any video format and size. Sometimes they can do it in hardware, meaning the graphics card (GPU) decodes the video. If a format is not supported by the hardware, desktops can fallback to software decoding. At that point, the player software itself will decode the video frames. Software decoding is slower than hardware decoding, but either option works.
Phones, netbooks and tablets on the other hand are not that powerful yet. Most are only able to do hardware decoding of video. It means the range of supported formats is narrowed down to what the GPU chip supports. Additionally, devices generally have an upper limit on the frame size of the video. For example, while the iPhone 4 supports HD video (1280×720 pixels), older models only supported video up to about 640×360 pixels.

The Solution

Unfortunately, you cannot support every device under the sun with a single file. It cannot be done. What you can do, however, is support a wide range of devices with a single file. We call this targeting the least common denominator. This is what we do within our own video platform. The files we render are targeted at the following devices:

• All iPad, iPhone and iPod Touch models (iPhone 3G, iPad 1 and above)
• All Android 2/3/4 phones and tablets (testing HTC Legend, Samsung Galaxy 1, Google Nexus 1 and above)

Some devices that can play our videos (excluding the pencil)
A video encoded for these devices will also work on desktops/notebooks (Flash), on many other phones (e.g. Blackberries, Nokias, Windows Phones) and on settops like PS3, XboX, Roku, Boxee and AppleTV. The specifications of such a video are as follows:

• Container format: MP4, headers at the beginning of the file (for seeking)
• Video format: H.264, Main profile, 640×360 pixels, around 500/900 kbps (kilobits per second)
• Audio format: AAC, Low Complexity profile, 44.1 kHz stereo, 96 kbps

Recommended Implementation

If you don’t have a tool for encoding to MP4/H264/AAC, you should download Handbrake. It is free, works on cross-platforms and produces high-quality results. Handbrake has a built-in present called iPhone & iPod Touch, which has exactly the right settings. Note that Handbrake supports a constant quality feature, which offers smaller files than a target size or target bitrate.
For embedding the video, you should use a recent version (6+) of the JW Player. In version 6, we released a download mode fallback, which allows devices that don’t support Flash or HTML5 to still play the video with their built-in media player. Here’s how the embed code looks with the default setup (Flash » HTML5 » Download):

jwplayer("container").setup({
file: "/static/video-360p.mp4",
height: 360,
width: 640
});

The end result can be seen below; a good quality video that plays back on any device with a single embed code:

Resulting videoplayer that works on all desktops & devices.

Note you can enhance this video even further by adding an HD quality video version. JW Player will enable this on select devices. See the HD Video Everywhere post for more info.