My guide to advanced video delivery with AIR for mobile resulted in a lot of interest, but also in the question how to exactly achieve 720p video quality on tablets, and the request for an encoding example with the corresponding player.

Here are two examples applications, one raw player without any framework, and a second with OSMF, both running on an iPad 1 and the Motorola Xoom.

 

Simple Video Player

package
{
import flash.desktop.NativeApplication;
import flash.desktop.SystemIdleMode;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.events.StageVideoAvailabilityEvent;
import flash.geom.Rectangle;
import flash.media.StageVideo;
import flash.media.StageVideoAvailability;
import flash.net.NetConnection;
import flash.net.NetStream;
 
[SWF(backgroundColor="#000000")]
public dynamic class AIRMobileVideo_AS extends Sprite
{
public function AIRMobileVideo_AS()
{
NativeApplication.nativeApplication.systemIdleMode = SystemIdleMode.KEEP_AWAKE;
NativeApplication.nativeApplication.addEventListener(Event.DEACTIVATE, handleDeactivate, false, 0, true)
 
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE ;
stage.addEventListener( StageVideoAvailabilityEvent.STAGE_VIDEO_AVAILABILITY , stageVideoState );
}
protected var stream:NetStream ;
 
protected function stageVideoState( e:StageVideoAvailabilityEvent ):void
{
var available:Boolean = e.availability == StageVideoAvailability.AVAILABLE ;
 
if ( available )
{
var nc:NetConnection = new NetConnection() ;
nc.connect(null) ;
stream = new NetStream(nc) ;
stream.client = this ;
var video:StageVideo = stage.stageVideos[0] ;
video.viewPort = new Rectangle( 0, 0, 1280 , 720 ) ;
video.attachNetStream( stream ) ;
stream.play( "http://www.overdigital.com/video/Hillman_720p23.976_2400kbps.mp4") ;
}
 
}
 
public function onMetaData( info:Object ):void
{
 
}
 
private function handleActivate(event:Event):void
{
NativeApplication.nativeApplication.systemIdleMode = SystemIdleMode.KEEP_AWAKE;
}
 
private function handleDeactivate(event:Event):void
{
NativeApplication.nativeApplication.exit();
}			
 
}
}

Source: AIRMobileVideo_AS

 

Video Player based on OSMF

package
{
import flash.desktop.NativeApplication;
import flash.desktop.SystemIdleMode;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
 
import org.osmf.containers.MediaContainer;
import org.osmf.elements.VideoElement;
import org.osmf.media.MediaPlayer;
import org.osmf.media.URLResource;
 
[SWF(backgroundColor="#000000")]
 
public dynamic class AIRMobileVideo_OSMF extends Sprite
 
{
public function AIRMobileVideo_OSMF()
{
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
 
NativeApplication.nativeApplication.systemIdleMode = SystemIdleMode.KEEP_AWAKE;
NativeApplication.nativeApplication.addEventListener(Event.DEACTIVATE, handleDeactivate, false, 0, true)
 
var videoPath:String = "http://www.overdigital.com/video/Hillman_720p23.976_2400kbps.mp4";
var resource:URLResource = new URLResource( videoPath );
var element:VideoElement = new VideoElement( resource );
var mediaPlayer:MediaPlayer = new MediaPlayer( element );
var mediaContainer:MediaContainer = new MediaContainer();
mediaContainer.addMediaElement( element );
addChild( mediaContainer );
 
}	
 
private function handleActivate(event:Event):void
{
NativeApplication.nativeApplication.systemIdleMode = SystemIdleMode.KEEP_AWAKE;
 
}
 
private function handleDeactivate(event:Event):void
{
NativeApplication.nativeApplication.exit();
}			
 
}
}

Source: AIRMobileVideo_OSMF

 

The OSMF version on both tablets.

 

Considerations

  • Ensure videos are mobile optimized, since mobile HW decoders likely don’t support all levels or profiles of H.264. Follow the encoding cookbook, and the mobile encoding guidelines.
  • Make sure to use the StageVideo API if you use an AS only approach, or the latest OSMF version which has build-in StageVideo support. Define <renderMode>direct</renderMode> in the Adobe AIR application xml file to enable StageVideo.
  • Consider adaptive streaming to adjust to less consistent mobile networks, as example HTTP Dynamic Streaming on Android, or HLS streaming on iOS.

Update 01/27/12: If you use the captive runtime approach, please update Flash Builder/Flash to the latest AIR version for 720p Android playback (AIR 3.1.0.5560 or higher)