Optimize Your Video for Mobile Playback

With the Android and iOS platforms growing like weeds, online publishers are scrambling to mobilize their video players and profit from these additional viewers. Since Apple’s iOS doesn’t run Flash, most of these publishers turn to the HTML5 <video> tag for delivering their clips to mobile devices.

While this is a critical first step (better to have your videos play than not), it is also just the start. The mobile user experience (UX) model is vastly different from that of the desktop computer, which means additional work is needed in areas such as interface, streaming and advertising. These UX differences have several implications for video players.

Touch Versus Mouse

The most obvious difference is user input. A mouse controls video players on the desktop, whereas both iOS and Android rely on capacitive screens which users touch with their fingers. Since a fingertip is both bigger and harder to position than a mouse cursor, buttons on mobile video players must be larger than their desktop equivalents.

When using a mouse, there is the so-called “mouse-over” state: the mouse is positioned over a button, but not clicked. Some video players rely on this state to pop up a volume slider or selection menu. This state is not available on touch devices, so mobile players can not rely on it.

On the other hand, touch devices do allow users to control applications by sliding one or more fingers across the screen. This type of interaction (found in features like gestures and multi-touch) is relatively new and still unexplored, but could become widely used over time. Some basic gestures, like sliding over a webpage or playlist to scroll, are already widely accepted and can be used today.

Full-screen Versus Windowed

Another key differentiation is screen size. Mobile screens are 3 or 4 inches in diameter, which is a big difference from 14-inch laptops or 20-inch desktop monitors. Therefore, on both Android and iPhone, videos are always played back in full-screen, instead of inside an HTML page. This means that visual interaction with other parts of the page – including companion ads that pop up – is lost on mobile devices. Publishers should not rely on this advertising model.

In this full-screen mode, both Android and iOS expose only system-provided video controls (pause, seeking). Important online video components such as share buttons and overlay ads are simply not possible. Therefore, any custom controls or graphics are best displayed before the video is started and/or after it has ended.

On-The-Go Versus At-The-Desk

Mobile devices are indeed frequently used on-the-go, meaning their internet connection may be poor and unreliable. The connection speed can change dramatically, even within a single video playback session if a user switches from 3G to WiFi. Therefore, iOS devices support a specific type of video streaming that continuously adapts the video quality to the available bandwidth connection: HTTP Live Streaming. It is highly recommended to use this functionality for mobile video playback.

Unfortunately, Android only supports this type of streaming as of version 3.0. To ensure optimal video quality, players can offer an up-front video quality selection. As Android manufacturers migrate from the 2.x to the 3.x platform, HTTP Live Streaming can, and should, replace this manual quality selector.

One nice additional touch is a “watch later” feature in mobile players. Users who are casually browsing while waiting somewhere can tag a video and forget about it. The publisher can then remind the user about the video at a later point. Publishers can implement “watch later” functionality using cookies, log-ins or one of the emerging services dedicated to this functionality.

Conclusion

In sum, the vast differences between desktops/laptops and mobile devices require a major redesign of existing video players. But things don’t stop at the player. The surrounding website needs optimization as well, with less content, less sidebars, less clutter and more focus on the video itself.

Mobilizing your video is not about swapping Flash for HTML5. It is about adapting your content to the device and facilitating a different type of user experience. Mobile video consumption is exploding, but it’s also still evolving, as are the platforms that serve this content to consumers. By going above and beyond the bare minimum now, you’ll be well positioned as mobile continues to explode.

As developers of one of the most widely used online video players, we constantly strive to provide optimal playback experience for our users. As we move towards the future generations of the JW Player, stay tuned for more and more exciting UI and UX improvements.

4 Comments

  1. JeroenW October 21, 2011 - 01:30 EDT

    We do support it (set the “file” option to the M3U8 URL). No example yet, but let me look into adding it (together with a tutorial).

  2. Akhlaq October 20, 2011 - 04:27 EDT

    Does jwplayer html5 mode support HLS? Is there a code example?

  3. Chris August 29, 2011 - 02:38 EDT

    Ok, that said, I’ve been searching for ever to find the best way to go about my needs.

    I have a website deals with videos. Mainly Videos.

    I keep seeing articles, such as this one that says to wrap the video in

    Heres my question, is there some web based software that will allow me to upload my videos, and then it will encode/convert my video to all Desired formats.

    Then, spit out an embed code, which i can copy and paste where i want to on my website

    And now, when a user lands on that page (using their iPhone),

    Instead of getting the higher quality and Incompatible video which will not play, they will instead be watching a compatible format for the iphone..

    its really weird cause i work with computers and web sites and all that but this specific topic i cant seem to understand for the life of me..

    Thanks!

  4. JeroenW August 29, 2011 - 09:29 EDT

    Indeed, videos must be in MP4 format. FLV videos will not play.

    There are services for uploading videos and converting them to the right format. Our own Bits on the Run is one. Just upload your videos, and the resulting embed codes will work on all browsers and phones.

Post a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>