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.
