Source Code - 720p Video on iPad and Android Tablets with Adobe AIR

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.

[iframe width="560" height="315" src="http://www.youtube.com/embed/kJF-sruI9_I" frameborder="0" allowfullscreen /]

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](http://www.overdigital.com/2010/05/08/h-264-encoding-cookbook-for-the-flash-platform/), and the [mobile encoding guidelines](http://www.adobe.com/devnet/devices/articles/mobile_video_encoding.html).

- 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](http://www.adobe.com/products/httpdynamicstreaming/?promoid=GYMXT) 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)