Playing local files with AIR

A common failure I have made and many others too as I helped a few friends with it is playing local files like Flash Video (FLV) or images like PNG or JPG with AIR.

In AIR you have for example the FileSystemTree control which shows you the content of a directory. The selectedItem property of this control is a File. Let’s say you have a VideoDisplay in place and want to play the file you try something like this:

myVideoDisplay.source = myFLVFile.nativePath;

This does not work. AIR expects a protocol which in this case is “file:///” which is available in the url property so the code should like this:

myVideoDisplay.source = myFLVFile.url;

I have made a little example application which shows local FLVs and Images:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	currentState="videoState" creationComplete="init()">
 
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
 
			private function init():void
			{
				fileSystemTree.directory = File.desktopDirectory;
			}
 
			private function browseDir(e:Event):void
			{
				var dir:File = new File();
				dir.browseForDirectory("Select directory");
				dir.addEventListener(Event.SELECT, onDirSelect);
			}
 
			private function onDirSelect(event:Event):void
			{
				fileSystemTree.directory = event.currentTarget as File;
			}
 
			private function onChange(e:Event):void
			{
				var file:File = e.currentTarget.selectedItem as File;
				if(!file.isDirectory)
				{
 
					var viewer:Object;
					switch(file.extension.toLowerCase())
					{
						case "flv":
							currentState = "videoState";
							viewer = videoDisplay;
							break;
						case "png":						
						case "jpg":
							currentState = "imageState";
							viewer = image;
							break;
						default:
							Alert.show("Unsupported file " + file.nativePath, "Error");
							return;
					}
 
					viewer.source = file.url;
				}
			}
 
		]]>
	</mx:Script>
 
	<mx:HDividedBox width="100%" height="100%" paddingLeft="10" paddingRight="10" paddingBottom="10" paddingTop="10">
		<mx:VBox width="200" height="100%">
			<mx:Button label="Change Directory" click="browseDir(event)" />
			<mx:FileSystemTree id="fileSystemTree" width="100%" height="100%"
				change="onChange(event)" />
		</mx:VBox>
 
		<mx:Canvas width="100%" height="100%" id="content" />
 
	</mx:HDividedBox>
 
	<mx:states>
		<mx:State name="videoState">
			<mx:AddChild relativeTo="{content}">
				<mx:VideoDisplay id="videoDisplay" width="100%" height="100%" />
			</mx:AddChild>
		</mx:State>
		<mx:State name="imageState">
			<mx:AddChild relativeTo="{content}">
				<mx:Image id="image" width="100%" height="100%" />
			</mx:AddChild>
		</mx:State>
	</mx:states>
 
</mx:WindowedApplication>

Create a new AIR app, paste the code above or download it here (remove the .txt) and you got this app:

LocalPlayer

15 comments to Playing local files with AIR

  • Yeah I run into the same problem – for me it also showed up on Macs on Pcs it worked even with just nativePath. Now I always just use the url property of the file object that seems to always work.
    Benz

  • Thanks, that is an easier way.
    I will change my post!

  • [...] Example how playing local files with Adobe AIR [...]

  • Mike

    Hi, thanks for this example. My question is how could I play something like an .AVI or .MP4 file from an AIR app? I want to write a custom app to manage and play my media (TV shows, movies, music clips etc) but I have no idea how to start an external app to play the file (such as VLC, WinAmp or ZoomPlayer et al) from AIR.

    I’ve googled but can’t find any way to do this – any info or advice on doing this?

  • Hi Mike,
    AIR uses the Flashplayer so you can only play video codecs supported.
    Did you try the Adobe Media Player? The AMP shows what is possible with video and AIR.

  • Mike

    Thanks for that Sönke – AMP looks interesting. I see there is a a “CDK” for AMP… I’ve not had time yet to research it but if it could be run from within an AIR app or Flex page as an object that would be cool – is this what you can actually do? Also, can you specify all ads and commercial content be hidden/not used etc?
    If this plays online content and also local media files then I could really use this to create my own custom media centre app/web site!

  • Gabriel

    I am new to adobe air using html/ajax. Please let me know how to play a video files using adobe air. If not, what is the alternative.

  • Gabriel, did you read the post you are commenting on?

  • [...] habe nun ein Beispiel gefunden, wo genau dieser Fall beschrieben wird: S

  • Tim

    Hi Guys,

    Great code!

    Question, if I wanted to automatically display an image or video from and XML file instead of browsing for it, how would I go about that?

    Thanks

    Tim

  • Thanks, just use the file.url as the image src dataProvier.

  • Hi there.

    I was wondering if there is a way to do this from Flash instead of Flex. I am using Dreamweaver to create the Air app and need to figure out how to do this from Flash. I’m using CS 5.5 and Flash Player 10.2. It does not want to accept “File”as a class. I tried importing it as “import flash.filesystem.File;”, but I get the error message “Definition flash.filesystem.File could not be found”.

    Here is my code:

    import fl.video.*;
    import flash.filesystem.File;
    import flash.net.FileFilter;

    var fileName:File = “F2v.flv” as File;
    myVideo.source = fileName.url;
    myVideo.stop();
    addChild(myVideo);

    Is this possible?

  • Sönke

    The error means your project does not include the AIR libraries. It should be set up as an AIR project and should work fine.

  • I was wondering if you have any experience loading local PDF files into an AIR application. I am using AIR 3.1 for iOS. I have got the local PDF to load using the StageWebView class, however I would prefer to load the PDF in the native application to the device, which could be the Safari browser or Adobe Reader, etc. Any insight into this would be greatly appreciated.

    Thanks.

  • I have the exact same question as Adam. I’m guessing this is just Apple sticking it to Adobe again. I’d rather not use the StageWebView even if I could get it to work. Apparently that automatically gets you an over 17 rating if you were going to submit to the Apple (App Store).

Leave a Reply

 

 

 

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">