Displaying a video in Flex using the NetConnection, NetStream, and Video classes

By Peter deHaan On March 1, 2008 · 33 Comments

The following example shows how you can display a FLV file in a Flex application using the NetConnection, NetStream, and Video classes, as well as how to use the onMetaData and onCuePoint event handlers to handle video meta data and cue points.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/01/displaying-a-video-in-flex-using-the-netconnection-netstream-and-video-classes/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">
 
    <mx:Script>
        <![CDATA[
            import mx.utils.ObjectUtil;
 
            private var nc:NetConnection;
            private var ns:NetStream;
            private var video:Video;
            private var meta:Object;
 
            private function init():void {
                var nsClient:Object = {};
                nsClient.onMetaData = ns_onMetaData;
                nsClient.onCuePoint = ns_onCuePoint;
 
                nc = new NetConnection();
                nc.connect(null);
 
                ns = new NetStream(nc);
                ns.play("http://www.helpexamples.com/flash/video/cuepoints.flv");
                ns.client = nsClient;
 
                video = new Video();
                video.attachNetStream(ns);
                uic.addChild(video);
            }
 
            private function ns_onMetaData(item:Object):void {
                trace("meta");
                meta = item;
                // Resize Video object to same size as meta data.
                video.width = item.width;
                video.height = item.height;
                // Resize UIComponent to same size as Video object.
                uic.width = video.width;
                uic.height = video.height;
                panel.title = "framerate: " + item.framerate;
                panel.visible = true;
                trace(ObjectUtil.toString(item));
            }
 
            private function ns_onCuePoint(item:Object):void {
                trace("cue");
            }
        ]]>
    </mx:Script>
 
    <mx:Panel id="panel" visible="false">
        <mx:UIComponent id="uic" />
        <mx:ControlBar>
            <mx:Button label="Play/Pause" click="ns.togglePause();" />
            <mx:Button label="Rewind" click="ns.seek(0); ns.pause();" />
        </mx:ControlBar>
    </mx:Panel>
 
</mx:Application>

View source is enabled in the following example.

Tagged with: onCuePoint • onMetaData

About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

33 Responses to Displaying a video in Flex using the NetConnection, NetStream, and Video classes

slamice says:

March 6, 2008 at 2:51 pm

This is a very good and simple example! I really do find your blog incredibly useful.

I’m pretty new to flex and am checking out the video features. I’m seeing everywhere examples (yours being the simplest) on streaming .flv files but hardly any on doing the same for H.264 files. I tried it in this example with its location on my fms and it did not work. Is there anything else I need to add?

Also, I was wondering if there was any specific reason you put the video in UIComponent instead of just a videoDisplay component?

Thanks!

Reply
shiv says:

March 7, 2008 at 12:47 am

Hey, Nice blog. Slamice is right. Even I wanted to know whether it is possible to play H.264 contents on flex.

Reply
Charlie Hubbard says:

May 30, 2008 at 8:08 am

Shiv: VideoDisplay extends UIComponent, and contains an instance of Video object so you wouldn’t place a Video object inside a VideoDisplay because it would be redundant. The reason it’s added to a UIComponent is because UIComponent is the very top component of Flex. All Flex containers (i.e. Canvas, Panel, HBox, etc) require their children to be a UIComponent as well. Video does not extend from UIComponent, so by itself, it’s not a Flex component. It’s originally a flash component so you have to add it to a UIComponent before adding it to any Flex Component.

If you are doing simple playback of video VideoDisplay a really easy way to playback simple video. If you are doing something more exotic then Video, NetConnection, NetStream, etc are going to give you more control but they are much harder to use.

Reply
michael says:

June 3, 2008 at 11:57 am

Can we do the same thing with a XML playlist ? if yes how do we do it ?

Reply
Carlos says:

June 13, 2008 at 4:02 pm

Hello, I do not have a lot of experience with Flex and am completely new at using video in any way. I am basing a Flex custom omponent on the above code, but am working with a video that is 23x the size of the sample here.

I am thinking of some kind of progress bar before the buttons, screen, etc. are visible. I would appreciate any ideas on how to accomplish this.

Best regards,

Carlos

Reply
kevin says:

June 16, 2008 at 1:31 pm

Hi,

Just wondering if I can play two netstreams in one netconnection simultaneously.
When I tried that, both videos can’t play well. Please advise.

Thanks.

Reply
oyun indir says:

July 6, 2008 at 12:10 am

Hey, Nice blog. Slamice is right. Even I wanted to know whether it is possible to play H.264 contents on flex.

http://www.oyunet.net

Reply
Vighnesdh says:

September 29, 2008 at 6:26 am

Please provide a html java script version as well of this example if possible thank you.

Reply
hugene says:

November 16, 2008 at 5:41 pm

Is it me or this code should not work:

in init() the following call is made:

nsClient.onMetaData = ns_onMetaData;

whereas as method ns_onMetaData should take an input Object:

private function ns_onMetaData(item:Object):void {…}

And, furthermore, ns_onMetaData() returns void, but in init() it is supposed to assign a value to nsClient.onMetaData.

Am I not understanding basic AS syntax or what?

Thanks a lot

Reply
deenalex says:

December 2, 2008 at 11:51 pm

Hi Everyone,

Can any one help me to convert any type of Video files into .flv format (i.e) flash video format.

I mean, if we browse and select any type of video, it (Flex Program) should convert it to .flv format.

Thanks in Advance……

Reply
phreed says:

December 10, 2008 at 11:37 am

The example was very helpful.
I have found that the NetStream really shouldn’t be opened until you are sure you have a good NetConnection.

_nc.addEventListener(NetStatusEvent.NET_STATUS, onConnectStatusEvent, false);

Also, to the previous poster… vlc works very nicely.
http://wiki.videolan.org/Documentation:Streaming_HowTo/Advanced_Streaming_Using_the_Command_Line

Reply
Jobin says:

February 4, 2009 at 10:12 pm

Hi,

Ur example was really useful.

Thanx,

Best regards,
Jobin

Reply
virendra says:

March 27, 2009 at 4:59 am

Hi,
Very nice blog. I have a problem i want a live video streaming but i m unable to do this. While my code is working properly on local system but when i have upoaded on server it is not creating any file. I think u will solve my problem. I have mentoned my fms path:

Reply

virendra says:

March 27, 2009 at 5:02 am

<?xml version="1.0″ encoding="utf-8″?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" creationComplete="initApp()" horizontalAlign="center" backgroundColor="#ABCDEF" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]" viewSourceURL="srcview/index.html">
    <mx:Script>
        <![CDATA[
        // ActionScript file
        import mx.controls.Alert;
        import mx.rpc.http.HTTPService;
 
        import flash.net.ObjectEncoding;
 
        private var nc:NetConnection;
 
        private var camera:Camera;
        private var microphone:Microphone;
        private var nsPublish:NetStream;
        private var nsPlay:NetStream;
        private var videoLocal:Video;
        private var fileName:String;
        //private var curVidFile:File;
        private var newFileNameStr:String;
        //private var desFile:File;
        public var application:Object;
        public var stamp:String = "virendra";
        //NetConnection.defaultObjectEncoding = flash.net.ObjectEncoding.AMF3;
        //public var myService:String = new NetConnection();
 
        public function initApp():void
        {
        nc = new NetConnection();
        nc.objectEncoding = flash.net.ObjectEncoding.AMF0;
        nc.connect( "rtmp://viredra.srfms.com/applications/live");
        Alert.show(nc.toString());
 
        }
 
        private function startCamera():void
        {
        camera = Camera.getCamera();
        microphone = Microphone.getMicrophone();
        vcLocal.attachCamera(camera);
        nsPublish = new NetStream(nc);
        nsPublish.attachCamera(camera);
        nsPublish.attachAudio(microphone);
 
        nsPublish.publish("streamer", "record");
 
        }
 
        private function stopCamera():void
        {
        nsPublish.close();
 
        }
 
        private function publish():void
        {
        //publish to local Drupal
        var thisRequest:HTTPService = new HTTPService();
        thisRequest.contentType = "application/xml";
        thisRequest.url = "http://localhost/amfphp/xmlrpc.php";
        thisRequest.method = "POST";
        var strBlogBody:String;
 
        strBlogBody = "" +
        "document.writeln(\"<object id='\"+id+\"' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' " +
        "codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,5,0,0' " +
        "width='300' height='300'>\");" +
        "document.writeln(\"<param name='flashvars' value='source=christophe'/>\");" +
        "document.writeln(\"<param name='src' value='/drupal/themes/MediaPlayer.swf'/>\");" +
        "document.writeln(\"<embed name='\"+id+\"' pluginspage='http://www.macromedia.com/go/getflashplayer' " +
        "src='\"+flashFile+\"' width='300' height='300'\");" +
        "document.write(\" flashvars='source=christophe'/>\");" +
        "document.writeln(\"</object>\");\n"+blogBody.text;
        strBlogBody = escape( strBlogBody );
 
        var XMLString:XMLDocument = new XMLDocument('<methodCall><methodName>metaWeblog.newPost</methodName>'+
        '<params><param><value><string>blog</string></value></param>'+
        '<param><value><string>username</string></value></param>'+
        '<param><value><string>password</string></value></param>'+
        '<param><value><struct>'+
        '<member><name>categories</name><value><array><data><value>java</value></data></array></value></member>'+
        '<member><name>description</name><value>'+strBlogBody+'</value></member>'+
        '<member><name>title</name><value>'+blogTitle.text+'</value></member>'+
        '</struct></value></param>'+
        '<param><value><boolean>true</boolean></value></param></params></methodCall>');
 
        thisRequest.request = XMLString;
        thisRequest.send();
        }
 
        private function play():void
        {
        videoFMS.source = "rtmp://viredra.srfms.com/live/streamer";
        videoFMS.live = true;
        videoFMS.play();
        }
 
        ]]>
    </mx:Script>
    <mx:HBox>
 
        <mx:Panel title="Local WebCam">
            <mx:VideoDisplay id="vcLocal" width="180″ height="120″/>
            <!–<VideoContainer id="vcLocal" width="180″ height="120″/>–>
            <mx:ControlBar>
                <mx:Button label="Start" click="startCamera()"/>
                <mx:Button label="Stop" click="stopCamera()"/>
                <mx:Button label="Play" click="play()"/>
            </mx:ControlBar>
        </mx:Panel>
 
        <mx:Panel title="Stream from FMS">
            <mx:VideoDisplay id="videoFMS" autoBandWidthDetection="false" width="180″ height="120″/>
        </mx:Panel>
    </mx:HBox>
    <mx:Form>
        <mx:FormItem label="Title:">
            <mx:TextInput id="blogTitle"/>
        </mx:FormItem>
        <mx:FormItem label="Body:" width="212″ height="104″>
            <mx:TextArea height="101″ width="159″ id="blogBody"/>
        </mx:FormItem>
        <mx:FormItem>
            <mx:Button label="Publish" click="publish()"/>
        </mx:FormItem>
        <mx:FormItem label="Label">
            <mx:Label text="Label"/>
        </mx:FormItem>
    </mx:Form>
 
</mx:Application>

arif says:

April 14, 2009 at 3:36 am

quick question, can i send a camera using netstream?

Reply
Gallant says:

April 21, 2009 at 5:20 pm

Thanks for this.

I’ve been moving a lot of my actionscript 2.0 mush into nice, clean actionscript 3.0 and this has helped alot.

Keep on coding! :)

Reply
Mark says:

May 1, 2009 at 2:39 pm

Hi:

The example was very helpful. I am learning Flex/AS3 and have created a simple Player to play H264 video. I am using var videoFrame:VideoDisplay; in the player. When I set the videoFrame.source property to something like http://myserver.com/test.mp4 all is well. When I try to use a URL like http://myserver.com/getvideo.php?id=12345 (which returns a valid mp4 file with correct http headers etc.) I do not see the video play. I currently use the QT plugin in a web page with URLs like the one above and it works fine.

If I use an approach like your example with the NetConnection and NetStream objects should the flash player be able to load and play video content that comes from a server script instead of directly from a video file in the servers document root?

Thanks for any advice.

Mark

PS – My SWF file and all the video content and PHP script are in the same location on the server so my assumption is that this not a security issue.

Reply
Guillermo says:

August 18, 2009 at 6:16 pm

When I try to replace the video source http…. for an rtmpe/rtmp it doesn’t work. Why?

Reply
Lisa says:

October 22, 2009 at 5:14 am

Thanks Peter for a nice and simple example,

i was just wondering if flex can handle any other streams which are not in .flv formats like the audio streaming links , or streaming audio and video content from a radio station streams
much like the .asx, .asf files .
may be the Flex Media Server and Encoder can help me stream such content but is there any other way to stream such content.
i even checked with OSMF it doesnt seem to support it as well.

i’ll appreciate your help

Thanks,
Lisa

Reply
Doug says:

December 23, 2009 at 11:20 pm

So, videodisplay is depricated in flex 4. How do you do this with videoplayer?

Reply
- natesh pai says:
  
  June 28, 2010 at 2:03 am
  
  i want information about flex
  
  Reply
Muhammad Ramzan says:

February 7, 2010 at 10:37 pm

This is a a very simply way to done it. this way is so nice

Reply
GJHDigital says:

March 3, 2010 at 1:10 pm

Error loading the demo:
Severity and Description Path Resource Location Creation Time Id
unable to open ‘C:….\Flex Builder 3\NetConnection_NetStream_Video_test\libs’
NetConnection_NetStream_Video_test Unknown 1267650308296 39

Do I need Flash CS4 for this or is there a .swc I need to download somewhere?

Thanks in advance!

Reply
- Peter deHaan says:
  
  March 3, 2010 at 5:51 pm
  
  @GJHDigital,
  
  No, I just copy/pasted the code into an existing project and it worked fine. If you imported the code via the ZIP file, you may have to double check that your project has a /libs/ folder. I think a few of these earlier ZIP files had a problem where the /libs/ folder wasn’t exporting since it was empty.
  
  Peter
  
  Reply
shaktiman says:

June 28, 2010 at 2:15 am

how to coonect video files into a flex

Reply
van_tomiko says:

July 9, 2010 at 6:28 am

hey,
it’s allright when do we want to use VideoDisplay class instead,
see this post here!

Reply
Shiv says:

July 19, 2010 at 1:50 am

I have created a flex application. When i play a file in my application it doesnt support full screen and on top of that the you-tube player is separated from flex video player. So both work as seperate players. What do you suggest me to do???

Reply
- gude says:
  
  September 15, 2010 at 11:47 am
  
  Hi,
  I have a trouble with a h264 video. The video is played only when it’s fully loaded in my browser.
  I tried with your code and also with mx:VideoDisplay. Actually the metadata are received only at the download is complete.
  I also try with the html5 video tag. With the video tag, the first frame appeared subitely when it’s available.
  Is it a known issue of the avc1 codec? I didn’t find much information on the net.
  
  Reply
  - Victor Kostin says:
    
    September 19, 2010 at 4:17 am
    
    It is common problem of mp4 container for flash video. It happens because MetaData is not at the begining of video file. You should move it using some util. Google for MOOV f4v;
Jomesili says:

April 17, 2011 at 8:01 am

Thank Verindra
My Stream Live From RED5 to FLEX Client Problem [Solved] from your example. heres what I did. For other who have this problem , just take out what you dont need from my Code

<!–

–>

Reply
Parthu says:

July 4, 2011 at 4:30 am

Hi ,

Can anyone help on this……

there is player for that i’m displaying a voting widget.if the player to be maximised widget not displaying.i need to display thatone.

can anyone plzzzz

Reply
Jibran says:

August 23, 2011 at 1:45 pm

I want the code for streaming live audio radio from internet in my flex blackberry application

Reply
Jean Delefrati says:

October 11, 2011 at 7:42 pm

Thank you a lot! With some modifications, this really helped me develop the final project of my graduate studies.

Greetings from Londrina/Brazil!

Reply