Requirements
   
Prerequisite Knowledge
Knowledge of ActionScript 3 and delivering video on the web.
Required Products
Sample Files
User level
Beginning
   
 
 
Adobe Flash has evolved into the most widely recognized video format on the web in the last few years due to its ability to standardize video delivery across browser desktops, reduce deployment costs and fragmentation, and provide a highly customizable platform to maximize revenue and reach. Flash includes broad support for advertising, tracking, content delivery networks, and live quality of service, and is the solution for the most popular online video sites—as well as the largest live events—in online history.
With the introduction of Adobe Flash Player 10.1 for Android, and the announcement of upcoming support for other mobile OS platforms, you can finally transfer the benefits of Flash to a mobile audience. This article discusses mobile video and Flash Player, encoding best practices, Flash Player best practices, and using the OSMF sample player.
 

 
Understanding mobile video and Flash Player

The majority of video content on the web is delivered through Adobe Flash Player. This means that Flash Player is the playback engine for video files (H.264, for example). Flash Player decodes and renders the video with your custom UI, adds tracking and advertising, and optionally secures the video files to protect your content (very important). It also guarantees consistent playback with one-time development efforts/costs, no matter what the feature set of the browser is, as long as Flash Player is installed (which happens to be the case on 98% of all desktops).

 
The mobile video ecosystem and the Flash Platform

The key advantage to developers of Flash Player 10.1 for mobile devices is the ability to transfer most of your desktop and player knowledge to the mobile environment. It addition, it's possible to use all of the Flash content delivery methods, including the following:
  • RTMP on demand and live with Flash Media Server 4
  • HTTP dynamic streaming on demand (file packager and web server with HTTP module) and live (Flash Media Server 4 + HTTP module)
  • P2P RTMFP with Flash Media Server 4
  • Progressive download from a regular web server
RTMPe and SWF verification are fully supported to protect your video content over protected streaming. The Flash Platform ecosystem is also fully supported, including encoders, tracking, advertisement, development tools, video CMS solutions, and more.
If you visit websites with your Flash Player–enabled browser, you will realize that a lot of the video content already works without any modifications. This alone is quite powerful, since it provides full access to an incredible amount of existing content without having to go through custom applications or hoping for a reduced mobile version.
When I talk about mobile optimization in this article, I mean enabling the best possible viewing experience on devices. In most cases, it requires serving the appropriate video files: although the new generation of smartphones is powerful, a 1080p video that might work well on the desktop won't work on the small screen of a mobile device.
Mobile optimization also includes optimizing the user interface to ensure that it works well with the touch screens of a mobile device. In many cases, it primarily means reducing the complexity of the UI and increasing the size of the button areas.

 
Video delivery using Flash compared to native mobile delivery

Most mobile devices have the ability to play videos directly through their local video player without requiring Flash Player. In some cases, it can be enabled through a direct link, sometimes through the HTML5 video tag. So what value does Flash add?
Well, it doesn't mean that because the video is encoded in a Flash-supported format, it won't play (for example, on the Apple iPad). If you choose the right format, the same video will play on the mobile device natively as well as in Flash Player. The benefits of Flash include the following:
  • Content protection: Flash lets you consistently protect your RTMP streaming videos across multiple screens without having to change the back-end infrastructure.
  • Adaptive bitrate: Flash Player 10.1 mobile devices support adaptive bitrate delivery for everything from your edge connection over 3G/4G, to WIFI, via RTMP dynamic streaming, as well as HTTP dynamic streaming.
  • Advertising/tracking support: Everything that you do with Flash on the desktop, you can do on the mobile device. This includes video ads, overlays, and companion ads. You can also gather the same amount of metrics, or run QoS services, without having to change your back end or services.
  • Customized player experience: You can create a complete custom player based on your user experience, which can include retail and e-commerce integration.
  • You are in control: It's your website, your content, and your business. You can control the user experience and the back end, and monetize the experience any way you want.
Even though some of those features can be enabled on mobile devices without Flash, they are not consistent across platforms. Flash enables you to build your experience once and deploy it consistently on all platforms that support Flash.
 

 
Encoding best practices

Encoding for Flash-enabled mobile devices is fundamentally not different from optimizing video for native phone playback. Flash uses the phone hardware if available to decode the video. If hardware decoding is not available, it will fall back to software.

 
Supported codecs

Flash Player 10.1 for Android supports all video codecs of the desktop version. According to Table 1, the best profile is H.264 baseline due to its consistent hardware support on devices. If content is already encoded in VP6-S, or Sorenson Spark, and follows the video size recommendations, it's not necessary to re-encode it.
Table 1. Supported video codecs in Flash Player for Android
Codec
Profile
Complexity
Mobile performance
Hardware decoding
Sorenson Spark
Low
Very good
No
ON VP6
E
Medium
Good
No
ON VP6
S
Low
Very good
No
H.264
Baseline
Low
Very good
Yes
H.264
Main
Medium
Device dependent (**)
Maybe (*)
H.264
High
High
Device dependent (**)
Maybe (*)
(*) Depends on mobile hardware.
(**) Very good quality on devices supporting main and high profile HW decoding (e.g. Droid 2, Droid X, HTC Evo, HTC Droid Incredible.

 
Video size

To recommend a video size for mobile devices is relatively challenging, since display sizes and resolution vary. To get the best performance out of H.264, we recommend using a width and height divisible by 16 (preferred) or 8 (all right). One size that offers a good balance between video resolution and performance for currently available Android mobiles with Flash Player is 512 x 288 pixels.

 
Encoding profiles

As I mentioned before, it's possible to use the older codecs in Flash Player, but since H.264 is a common standard for mobile devices, it's the more likely choice. The encoding settings in Table 2 are guidelines for H.264. To take advantage of dynamic streaming efficiently to adjust for different network conditions, multiple bitrate encodings are recommended.
Table 2. Mobile video encoding guidelines for H.264
Video size
512 x 288
Frame rate
25 fps (PAL)
23.976 (film)
29.97 (NTSC) (*)
Profile
Baseline
Level
2.2
Bitrates
100−800 kbps
(*) Although Flash Player can play 29.97 fps, it's recommended to use 23.97 if the source fps allows it.
To learn more about H.264 encoding, please download the H.264 encoding cookbook and visit the section of the Adobe Mobile and Devices Developer Center that gives tools and tips for optimizing web content for mobile delivery.
 

 
Player best practices

Besides delivering an optimized version of the video, it's equally important to use a player that works well on mobile devices.

 
ActionScript best practices

The overall performance of your mobile video player is partially related to the way you build its core. A hard limitation is device memory. Since RAM is limited, don't expect a player to work that loads hundreds of megabytes of images into memory. It's also important to follow generic Flash Player performance best practices to avoid ActionScript execution overhead. You can find more details in Optimizing Performance for the Flash Platform in the Adobe Flash Platform for Mobile online documentation.

 
UI considerations

Equally important is the user interface is the need to optimize the experience for fingertips touching the UI elements. This includes increasing the size of buttons, but also optionally going to full-screen mode immediately upon playback so that the user doesn't have to look for a full-screen mode and can focus on the video.
Depending on the complexity of the video player, Flash on Android devices also supports the back button, which can be very beneficial for the overall user experience. For more examples for mobile Flash interfaces, visit the Adobe Flash showcase for mobile with your mobile device.
Because this article is primarily focused on the encoding, I will use a public mobile optimized sample player based on the Open Source Media Framework (OSMF). It adds a mobile optimized user interface to the OSMF core. The Open Source Media Framework is Adobe's standardized media framework to streamline Flash Player development and integrate third party plug-ins, all in an open source format and fully customizable.
 

 
Using the OSMF sample player

At the time I wrote this article, Adobe Flash Media Playback (based on OSMF) didn't include a mobile optimized interface. To easily deploy our mobile encodes, I'm using a sample OSMF mobile player available on the Developer Center. It's easy to configure over HTML/XML.
For the best possible user experience, this example demonstrates how to define multiple video bitrates that adjust based on changing bandwidth conditions; for example, to switch from 3G or 4G to edge networks (dynamic streaming).

 
Get the player

The sample player is available on the Adobe website at adobe.com/go/fpmobile_mobilevideoplayer (ZIP, 37.8 MB). Download the player's ZIP archive and extract the files. Go into the deploy subfolder. The index.html contains an information and configuration site. You are interested in the referencePlayer.html file, which directly embeds the sample player.

 
Configure the player

There are multiple configuration options, including using a RSS feed as source. Since you are only interested in a single clip, you can use the JavaScript configuration option.
Remove the mediaSourceURL property from the default configuration, add the JSReadyCallback listener, and define the onPlayerInitialized function  to configure the video player:
 
<script> var playerID = "swf_module"; var player; function $(p_ID) { return document.getElementById(p_ID); } function onPlayerInitialized(p_player) { player = p_player; var mediaSources = [ {url:"rtmp://myfmsserver.com/vod/mp4:android150.mp4", streamType:"vod", bitrate:150}, {url:"rtmp://myfmsserver.com/vod/mp4:android250.mp4", streamType:"vod", bitrate:250}, {url:"rtmp://myfmsserver.com/vod/mp4:android350.mp4", streamType:"vod", bitrate:350}, {url:"rtmp://myfmsserver.com/vod/mp4:android450.mp4", streamType:"vod", bitrate:450}, {url:"rtmp://myfmsserver.com/vod/mp4:android600.mp4", streamType:"vod", bitrate:600}, {url:"rtmp://myfmsserver.com/vod/mp4:android800.mp4", streamType:"vod", bitrate:800}, ]; player.load( {title:'new media', sources:mediaSources}); } function embedSWF() { var flashVars = { mediaPosterURL:"img/poster.jpg", <!-- playlistURL must be null or not included in flashvars if not being used --> playlistURL:null, playerAutoPlay:"false", playerAllowInlinePlay:"false", playerOnEndExitFullScreen:"false", playerOnEndShowPoster:"false", skinURL:"swf/adobeSkin.swf", JSReadyCallback:"onPlayerInitialized" }; swfobject.embedSWF("swf/mobilePlayer.swf", "swf_module", 512, 288, "10.1.0", "swf/expressInstall.swf", flashVars, {allowFullScreen:"true", bgcolor: "#000000"}, {id:playerID,name:playerID} ); } </script>
In this case you are adding multiple bitrate versions. It's also possible to switch to RTMP live streaming by setting the stream type to live (streamType:"live") or point to a F4M file via the mediaSourceURL property to enable HTTP dynamic streaming. When you're finished, the mobile player should look like the one shown on the device in Figure 1.
 
Mobile player running on an actual device
Figure 1. Mobile player running on an actual device

 
Where to go from here

Although this article covered only the basics, I hope I've provided you a with a quick guide to deploying your video to mobile devices with Flash in a couple of easy steps.
This is just the beginning. You can use any player framework and easily convert it to be mobile-compliant. The conversion from your desktop experience to mobile has never been easier. You're not just limited to video streaming either; Flash Player 10.1 for mobile supports all Flash Media Server 4 features, including P2P video delivery, which will enable a new breed of mobile video applications. For more information, visit the section of the Adobe Mobile and Devices Developer Center giving tools for optimizing web content for mobile delivery.