Flex Examples
The following example shows how you can use the new metadataReceived event in Flex 3 to easily grab the metadata from an FLV file.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/15/viewing-an-flv-videos-metadata-using-a-flex-videodisplay-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.events.MetadataEvent;
import mx.utils.ObjectUtil;
private const VIDEO_URL:String = "http://www.helpexamples.com/flash/video/cuepoints.flv";
private function videoDisplay_metadataReceived(evt:MetadataEvent):void {
var arr:Array = [];
var item:String;
var meta:Object = evt.info; // videoDisplay.metadata;
var value:*;
for (item in meta) {
if (ObjectUtil.isSimple(meta[item])) {
if (meta[item] is Array) {
value = "[Array]";
} else {
value = meta[item]
}
arr.push({name:item, value:value});
}
}
arr.sortOn("name", Array.CASEINSENSITIVE);
dataGrid.dataProvider = arr;
dataGrid.visible = true;
}
]]>
</mx:Script>
<mx:Button label="Click here to load video"
click="videoDisplay.source = VIDEO_URL;" />
<mx:VideoDisplay id="videoDisplay"
visible="false"
ready="videoDisplay.visible = true;"
metadataReceived="videoDisplay_metadataReceived(event);" />
<mx:DataGrid id="dataGrid"
visible="false"
width="100%"
height="100%" >
<mx:columns>
<mx:DataGridColumn dataField="name"
headerText="Name:"
sortable="false" />
<mx:DataGridColumn dataField="value"
headerText="Value:"
sortable="false" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
View source is enabled in the following example.
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.
Share
humm…got error. I amusing Flex 2.01
Cannot resolve attribute ‘metadataReceived’ for component type mx.controls.VideoDisplay.
metadataReceived=”videoDisplay_metadataReceived(event);” />
got, it only work in Flex 3.
Hi,
you seem to know a lot about flex and actionscript programming. I’ve been looking everywhere, but still haven’t found a working solution to this problem:
Flex 3 with Flash Player 9 supports h.264 encoded video. But VideoDisplay doesn’t? How should I program this?
I’ll be sooo grateful if you can help me find the answer!
Vegard,
Honestly, I haven’t tried H.264 w/ Flex yet, but it is high on my list of things to try. I haven’t verified anything, but I’d recommend starting with downloading the latest version of the Flex 3 Beta SDK from http://labs.adobe.com/technologies/flex/sdk/flex3sdk.html and see if there have been any edits to the VideoDisplay component.
Sorry,
Peter
I same error “mx.controls.VideoDisplay”
I compling flex3 beta..
why??
I work this..
D:4.Language\__SDK\flex3sdk_b1_061107\bin>mxmlc -version
Version 3.0 build 172357
D:4.Language\__SDK\flex3sdk_b1_061107\bin>mxmlc D:4.Language\Flex\Source\blo
g.flexexamples.com\viewing_an_flv_videos_metadata_using_a_flex_videodisplay_control.mxml
Loading configuration file D:4.Language\__SDK\flex3sdk_b1_061107\frameworks\flex-config.xml
This beta will expire on Wed Oct 31 00:00:00 KST 2007.
D:4.Language\Flex\Source\blog.flexexamples.com\viewing_an_flv_videos_metadata_
using_a_flex_videodisplay_control.mxml(43): Error: Cannot resolve attribute ‘metadataReceiv
ed’ for component type mx.controls.VideoDisplay.
metadataReceived=”videoDisplay_metadataReceived(event);” />
kan,
The
metadataReceived event must have been added in a newer version. I'm not sure exactly which build, but try grabbing a newer nightly build from the Adobe Labs site at http://labs.adobe.com/technologies/flex/sdk/flex3sdk.html.Peter
I have the latest version and Still doesn’t work properly…
Severity and Description Path Resource Location Creation Time Id
Cannot resolve attribute ‘metadataReceived’ for component type mx.controls.VideoDisplay. documentos uno.mxml line 43 1190053854082 7932
have any idea???
Rafael,
I built a simple test case and it seems to be working for me in build 182505. Do you know which exact version of the SDK you’re using? If not, you can find out by typing “mxmlc -version” in your target /bin/ directory.
<?xml version="1.0" encoding="utf-8"?> <!-- Flex 3 Nightly 182505 --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.events.MetadataEvent; private function videoDisplay_metadataReceived(evt:MetadataEvent):void { lbl.text = evt.type; } ]]> </mx:Script> <mx:VideoDisplay id="videoDisplay" source="http://www.helpexamples.com/flash/video/cuepoints.flv" metadataReceived="videoDisplay_metadataReceived(event);" /> <mx:Label id="lbl" text="--default--" /> </mx:Application>Just to keep it in mind, if the flv don’t have metadata the metadataReceived event wont be triggered. so, it depends on the flv file as well…
it will be nice a way to figure that out ( if the file has metadata or not )
If you’re using Flex 2, don’t define the metadataReceived event in mxml, define it through ActionScript instead.
The VideoDisplay class is missing the Event tag
[Event(name="metadataReceived")]
So when defining metadataReceived through mxml you’ll get an error that no such method exists, allthough it is being dispatched. Adding it through ActionScript in a Script block works fine:
myVideo.addEventListener(“metadataReceived”, metadataReceivedHandler);
I’m also not clear on why you use an Array to store the metadata data. I’d use an Object instead and also not exclude nested Array and Object data. For instance, when using Burak’s metadata injector, data is added with keyframe timestamps that can be used to stream video through PHP or Coldfusion:
http://www.buraks.com/flvmdi/
http://www.realitystorm.com/experiments/flash/streamingFLV/
http://www.flashcomguru.com/index.cfm/2005/11/2/Streaming-flv-video-via-PHP-take-two
In your example that data is discarded.
Here’s what I’m currently using instead:
var obj:Object = {}; var item:String; // videoDisplay.metadata; var meta:Object = evt.info; var value:*; for (item in meta) { if (meta[item] is Array) { value = ArrayUtil.toArray(meta[item]); }else{ value = meta[item] } obj[item] = value; } trace(ObjectUtil.toString(obj));Hi! Many thanks to you, that it’s exactly what I am looking for since some days, before I looped until I have video.metadata != null in a ENTER_FRAME event handler ;-( very dirty !!! Strange that Adobe did not integrate it since Flex 2.0, like for smoothing property which is not available for VideoDisplay and Image controls (yes I know that can be fixed with mx_internal …) but why Adobe doesn’t make them available ???
Tom,
Yeah, I’m not sure how many fixes get back-ported to the Flex 201 framework. I don’t suspect too many (we’re more focused on Flex 3 at the moment, naturally).
As for VideoDisplay.smoothing, I know it has been mentioned/requested before. You may want to search the public Flex bug base at http://bugs.adobe.com/flex/ and file a bug report/feature request if there isn’t one already.
In fact, now is a great time to file any bugs/enhancement requests you may have. With Flex 3 development slowing down, Flex 4 planning is starting.
Regards,
Peter
Peter,
I have a question about metadatareceived event: I load 2 videos sequentially, and before that I add an event listener at my video control: video.addEventListener(MetadataEvent.METADATA_RECEIVED, handlerMetadataReceived);, then I load the first video, ok handler is called, but when I load the second, handler is never called!!!
Maybe handler needs to be added twice??
Best,
Tom
Very strange … seem to be a bug! Instead of metadatareceived event I use this code:
private function handlerMetadataReceived (event:Event):void {
if (video.metadata != null) {
trace ("Meta received! " video.totalTime "\n");
this.removeEventListener(Event.ENTER_FRAME,handlerMetadataReceived);
}
}
And when I load a new source of video:
video.source = this.getVideoUrl(value.video,0,this._sessionID, this._userBP);
video.load();
this.addEventListener(Event.ENTER_FRAME, handlerMetadataReceived);
Video is a VideoDisplay object. Works good for me, Is anyone could try to show 2 videos sequentially and load metadata?
Oups!! I am sorry for my last couple of comments, actually I set autoPlay to false and now metadatareceived is dispatched for my 2 videos ;-)
hellow i am alvi,
this is nice blog i ever visit. keep it more up. thanks
Once again, you made my day. Thanks for the FLV metadata tip. :)