Home » Mobile » Adobe AIR » Source Code – 720p Video on iPad and Android Tablets with Adobe AIR

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

Posted by: Jens Loeffler    Tags:  , , , , , ,     Posted date:  January 14, 2012  |  15 Comments



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)

About the author
Jens Loeffler
Technology enthusiast and evangelist, with a passion for online video and mobile. Senior technical evangelist on Adobe's Media Solutions product management team focusing on online video and services. The views expressed on this blog are personal views.



Related Posts

Is Samsung’s Ad Strategy Oddly Similar to Apple’s?
I remember first seeing the Samsung Galaxy S II commercial  "The Way We're Wired" and I was surprised about the depth of the message, and the very emotional, almost revolutionary theme. Until I read about Apple's "The...


Adobe AIR based Snagfilms available for Android, Kindle Fire and Playbook
Earlier this month, Snagfilms launched their free online video streaming service to devices using Adobe AIR. SnagFilms today released the most popular titles in its acclaimed independent film library via new free film-streaming...


Flash Player and Android Changes – A Technical Deep Dive How to Adjust Your Mobile Strategy
Adobe recently announced to not further focus on Flash Player on mobile - a logical step since iOS doesn't have Flash Player browser support, and therefore mobile sites are mostly developed in HTML5. Over the past two years,...


Post comment as
twitter logo facebook logo
Sort: Newest | Oldest
starchicken
starchicken 5 pts

Hey, 

 

Thanks for this great article.

I would like to know if I have to use the stageVideo API or if it could work without it. Basically, I would like user could slide video by touching the screen. Thanks !

 

share
  • spam
  • offensive
  • disagree
  • off topic
 Like
Jens Loeffler
Jens Loeffler 6 pts moderator

 starchicken  Yes, you have to use StageVideo, otherwise the performance won't be good. You can move the video object around though by modifying the StageVideo view area - there is an example in this article. http://www.overdigital.com/2012/01/09/the-ultimate-guide-to-understanding-advanced-video-delivery-with-air-for-mobile/

share
  • spam
  • offensive
  • disagree
  • off topic
 Like starchicken
santanu4ver
santanu4ver 5 pts

I'm using iPad iOS 5.1 with Flash builder 4.6. I'm trying building an iPad app holding a list and videos in its itemrenderer components.

 

The code that I'm using to use the StageVideo is working pretty well when using outside the List/itemRenderer component, that means in the same View class. The video is coming as expectedly and playing on iPad. But whenever I'm trying to call the same code inside an itemrenderer object, the app crash.

 

The code snippets as you described:

 

               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, 622 , 480 ) ;

                                                  video.attachNetStream( stream ) ;

                                                  stream.play( new File(new File("app:/elements/video/FoxTraveller_NIB.mp4").nativePath).url ) ;

 

                                        }

 

I've noticed that available field coming as 'available' but it instantly crash.

 

Any help would be highly appreciated! Please.

 

Thanks & Kind Regards.

share
  • spam
  • offensive
  • disagree
  • off topic
 Like
Jens Loeffler
Jens Loeffler 6 pts moderator

 santanu4ver Thanks for sharing, that is pretty odd - could you provide a sample application and file a bug on http://bugs.adobe.com/? 

share
  • spam
  • offensive
  • disagree
  • off topic
 Like
JimInspired
JimInspired 5 pts

I have been able to get the OSMF sample to work with a progressive download, but not with an HLS stream (sourced from my Wowza streaming server). The same HLS url will play on the iPod Touch / iPad 2 directly in QT player (using browser to load it).

 

I did alter the OSMF sample to use a media factory to create the media element, but no dice.

share
  • spam
  • offensive
  • disagree
  • off topic
 Like
Jens Loeffler
Jens Loeffler 6 pts moderator

 JimInspired Hi Jim. I assume this is on iOS. Did you set renderMode to direct? In addition, does your HLS URL end with .m3u8? Please also make sure you don't use autoPlay, there is currently an issue. 

share
  • spam
  • offensive
  • disagree
  • off topic
 Like
JimInspired
JimInspired 5 pts

 JimInspired FYI, I can get HLS stream to play in the non-OSMF sample. I've done a bunch of research and from what I can tell, OSMF does not support HLS streams.

share
  • spam
  • offensive
  • disagree
  • off topic
 Like
Jens Loeffler
Jens Loeffler 6 pts moderator

 JimInspired Hi Jim, it works - did you check if you followed the tips I mentioned above? 

share
  • spam
  • offensive
  • disagree
  • off topic
 Like
PaoloBernardin1
PaoloBernardin1 5 pts

Hi, I'm trying to use this in a flex mobile application (flex 4.6).

it work when I test on desktop iPad simulator but not on the devise. I even used your mp4 in order to avoid encoder problem.

I'm non able to make iOS play mp4 video. And can't get any information on how to do this.

It would be great if you could post a sample code of how to do this with a flex project.

 

Thanks

share
  • spam
  • offensive
  • disagree
  • off topic
 Like
Jens Loeffler
Jens Loeffler 6 pts moderator

 PaoloBernardin1 Does it work on the actual device? The simular could cause some issues, since it's a simulator, and not a real emulator. With Flex you also need to hide the background (set it 0 alpha) when using StageVideo.

share
  • spam
  • offensive
  • disagree
  • off topic
 Like
Hogan Lee
Hogan Lee 5 pts

 Jens Loeffler 

What if you're buildiing an as3 mobile project, how do you set the background alpha to 0?

share
  • spam
  • offensive
  • disagree
  • off topic
 Like
Jens Loeffler
Jens Loeffler 6 pts moderator

You don't have to worry about it with AS only, just make sure StageVideo is the lowest layer (no background graphic underneath). 

share
  • spam
  • offensive
  • disagree
  • off topic
 Like

Trackbacks
  1. Source Code - 720p Video on iPad and Android Tablets with Adobe AIR | Flashstreamworks | Everything about Flash | Scoop.it says:
    January 17, 2012 at 4:31 am

    [...] jQuery("#errors*").hide(); window.location= data.themeInternalUrl; } }); } http://www.overdigital.com – Today, 1:31 [...]

  2. air for ios 用stagevideo 播放mp4影片 | 玩創互動 – 分享實驗室 says:
    February 9, 2012 at 8:56 am

    [...] 參考:http://www.overdigital.com/2012/01/14/720p-video-on-ipad-and-android-tablets-with-adobe-air/ 本篇發表於 [ Air ] 與標籤於 air ios stagevideo mp4 由 jack.chen。固定網址書籤。 [...]