I’ve been working on an iPad app using the AIR 3.0 SDK alongside the Flash iOS compiler and ran into a speed bump today trying to find a solid, fully working solution to accomplish this task. My goal was to have a video launch inside the native iOS video player allowing the user to use the latest AirPlay feature in iOS 5. I came across a few descent solutions including the FLVPlayback component, Video API, and the all new StageVideo API, but none of these provided me with everything I needed. The StageVideo API is a great solution and will allow your app to utilize the devices hardware acceleration capabilities. The major drawback is that the StageVideo object is not part of the display list and hides behind all other display objects.

I decided to use the StageWebView API, which displays HTML content in a stage view port. A lot of tutorials and articles online mention creating an HTML5 document and using the <video> element to load the video. This does work quite well, however, there are many features that don’t function properly including the ability to have the video auto play; something I needed. If this is fine with you, there is still one MAJOR problem that seems to be on the top of many peoples list and there are no (well none that I found) descent solutions. When you close the StageWebView instance, the video continues to play in the native video player somewhere behind the scenes and there is no way to stop it. If this is your problem then you’ve come to the right place; I will provide the solution (or hack) in this article.

var webView:StageWebView = new StageWebView();
var path:String = 'file://path_to_video/video.mp4';
webView.stage = this.stage;
webView.viewPort = new Rectangle( x, y, width, height);
webView.loadURL(path);

In the code above we create a new instance of the StageWebView object. We need to provide the instance with a stage to attach itself to. You can just pass along the current stage of your application. The viewPort property takes a Rectangle object with the position and dimensions of where you want the video to appear on the stage. Since we are loading a local video file we use the “file://” URI scheme and pass it into the loadURL() method. At this point your video will load and occupy the width and height of the view port and start playing once it’s loaded.

The StageWebView class is NOT a display object and cannot be added to the Flash display list. It loads on top of all the other display objects in your application.

According to Adobe’s documentation, to hide the StageWebView object all you need to do is set its stage property to null. This however, didn’t work and does not stop the video from playing in the background.

To accomplish exactly what I was looking for I had to set the viewPort property to null, as well as call the reload() method on webView.

I also recommend disposing of the object and having the garbage collection occur sooner, in turn, freeing up the memory faster. Finally I set the webView variable to null so that we have no references to the actual StageWebView object.

webView.reload();
webView.viewPort = null;
webView.dispose();
webView = null;

Voila!