Hi,
Thank you for your tutorial.
I have tested this "Simple Video Player",
But I hearing in my Ipad only sound, video is not visible. Ipad Screen is black
Testing with Flash CS6 and Air 3.7
What can I do?
Thanks
43 Comments
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.
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)
Related Posts
Session online – Building Applications for iPhone with Flash Pro CS5... October 6, 2009 | Jens Loeffler
Vitalstream Customer Showcase July 21, 2005 | Jens Loeffler
NBCU Research Guru Alan Wurtzel Shares the 3 Surprises of the London Olympics... August 11, 2012 | Jens Loeffler
Prometheus TEDTalk 2023 with Peter Weyland – “We Are The Gods Now... February 29, 2012 | Jens Loeffler
39 comments
I imported the sample code into Flash Builder 4.7 beta and deployed it to an iPad2 (iOS 5.1.1) and a ASUS Transformer (Android 4.0.3). I left the mp4 URL as is. It doesn't work on either device. On the iPad I observe a NetStream NetStatusEvent "NetStream.Play.Failed". On the ASUS Transformer, I hear audio but see no video.
I also tried playing the mp4 in the default browser on both devices. It plays on the Transformer but not on the iPad.
By the way, on the Transformer, the app exits immediately. I worked around it by commenting out "NativeApplication.nativeApplication.exit()" in handleDeactivate().
This follows right along with a string of problems I have seen with StageVideo which I summarized on the Adobe AIR mobile development forum.
It should definitely work - can you double check if renderMode is set to direct, and you are using the latest AIR runtime?
@Jens Loeffler Yes, renderMode is set to direct in AIRMobileVideo_AS-app.xml:
<renderMode>direct</renderMode>
Yes, I am using the AIR 3.4 SDK:
<application xmlns="http://ns.adobe.com/air/application/3.4">
That's a bit odd, i tested it on the ipad and on the Motorola Xoom. Could you try one of the URLs in this XML files?
http://www.overdigital.com/demos/nab/appDemoSourcesIOS.xml - I also have a more complete example here: http://www.overdigital.com/2012/06/27/source-code-adobe-air-3-3-retina-video-application/
Thanks for this post.I tried this with rtmp url for playing the live stream.It plays well.But the video doesnot display in full screen rather it display only in corner of the screen..After changing output size in encoder the video enlarges and it doesnot fit in sceen but out of screen..How to make the video display within screen in exact fit to the screen size for any encoder video size?
@divyat That's really odd. What encoder are you using, and what are your encoder settings?
I am using FMLE encoder. Format is H.264,Frame rate15.00,Total bandwidth required to stream 248kbps.
I couldn't display the full video source within the screen but a part of the video only within the screen .
Thank you Jens Loeffler,
After setting width and height of mediaContainer to the fullscreenwidth and fullscreenheight the video displayed in fullscreen..
@divyat Did you try the OSMF and the AS only version? At least the AS version should automatically scale, for OSMF you need to set scaling manually.
I'm still not able to make it work in a flash builder project, I get not error, but i can't see the video play on the device.
would you mind posting a flash builder project sample?
@PaoloBernardin1 You should be able to import the examples into Flash Builder (it was created with Flash Builder). Do you hear audio? Make sure to set renderMode to direct on Android (or direct/gpu on iOS), and if you use the Flex framework, set the background alpha of the application to 0.
@Jens Loeffler @PaoloBernardin1 I have set the background alpha to 0 in the main application window, but still no luck. Can you please explain where the background should be set to 0
1 Like
@Jens Loeffler @PaoloBernardin1 I have actually been able to view the video. The challenge as actually that the video element was not been properly be added to the display list which i was able to fix, thanks.
1 Like
@kolexinfos @PaoloBernardin1 Background alpha 0 is for Flex applications. StageVideo is always at the bottom layer, if you have a colored background, it will overlay the video and you won't see it (audio only). Do you hear audio at all?
@Jens Loeffler Actually I was able to make it work by updating to air 3.2 and to the latest release of osmf.swc.
But the video (i'm using your mp4 as a test) doesn't run very smooth.
Plus are there any controls available for the mediaplayer or we have to implement it ourselves?
Thanks for you help
@PaoloBernardin1 That's indeed odd, on iPad2 with H.264 the video is just passed to the native player. Maybe it stutters because of insufficient bandwidth?
@PaoloBernardin1 What device are you testing on? The 720p video only runs smoothly on tablets and ICS, for Android 2.x smartphones you have to follow the Android encoding guidelines (http://www.adobe.com/devnet/devices/articles/encoding-guidelines-android.html) - the smartphone (Android 2.x) rule is basically not higher than 640x360, and no excessive bitrates. Strobe Media Playback has a mobile touch skin, more information here: http://sourceforge.net/apps/mediawiki/osmf.adobe/index.php?title=HTML5_%26_JavaScript_support_for_SMP. Also on Android tablets + ICS, you have to use renderMode direct in the application.xml, otherwise 720p won't work.
Hi jens, thanks for the article.
I tested the version based on OSMF. In my Ipad runs perfectly. I do not have an Android tablet and failing I used Samsung GT-I9000 Galaxy, the video load but soon after the application quits playing. I do not know if this device is suitable for such applications. Can you say something about it?
Greetings
PD. Sorry for my bad English
@tonilopez It should work - what is the video you are testing with? You could also try to use AIR 3.3 from Adobe Labs - http://labs.adobe.com/technologies/flashplatformruntimes/air3-3/
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 !
1 Like
@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/
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.
@santanu4ver Thanks for sharing, that is pretty odd - could you provide a sample application and file a bug on http://bugs.adobe.com/?
@Jens Loeffler Hi, thanks! Actually it was my fault, a few associated methods with the stream.client which generally 'not' requires to explicitly code while in View component but in a ItemRenderer component (here the stream client bind with the ItemRenderer). In my case those methods weren't present so it was actually crashing while running in device, I found it after debug mode. Now since the methods are not present in the ItemRenderer component, it works as expected. Thanks.
1 Like
@santanu4ver Great to hear, yes, that's a pretty common issue once you start defining your own client handler.
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.
@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.
@JimInspired Hi Jim, it works - did you check if you followed the tips I mentioned above?
@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.
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
@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.
You don't have to worry about it with AS only, just make sure StageVideo is the lowest layer (no background graphic underneath).
Polarized oakley Sunglasses
Oakley Sunglasses Women
Cheap Oakley Sunglasses Sale
Cheap Oakley Sunglasses
Oakley Sunglasses Sale
[...] jQuery("#errors*").hide(); window.location= data.themeInternalUrl; } }); } http://www.overdigital.com – Today, 1:31 [...]
[...] 參考:http://www.overdigital.com/2012/01/14/720p-video-on-ipad-and-android-tablets-with-adobe-air/ 本篇發表於 [ Air ] 與標籤於 air ios stagevideo mp4 由 jack.chen。固定網址書籤。 [...]
[...] Source Code – 720p Video on iPad and Android Tablets with Adobe AIR. 分享到： Facebook MSN QQ空间 新浪微博 LinkedIn EverNote 更多 This entry was [...]
[...] 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. [...]