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.
Full code after the jump.
<?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.
Good job!
Niceeeee!!!
great
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!
Hey, Nice blog. Slamice is right. Even I wanted to know whether it is possible to play H.264 contents on flex.
thanks..
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.
Can we do the same thing with a XML playlist ? if yes how do we do it ?
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
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.
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
Please provide a html java script version as well of this example if possible thank you.