Optimize Your Video for Mobile Playback

Aug 12, 2011

Share:

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

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.