Flex Examples
In a previous example, “Viewing a video’s cue points using a Spark VideoPlayer control in Flex 4″, we saw how you could view a video’s cue points using a Spark VideoPlayer control in Flex 4 by listening for the metadataReceived event and then inspecting the VideoEvent object’s metadataInfo.cuePoints property.
The following example shows how you can detect cue points on a Spark VideoPlayer object in Flex 4 by listening for the cuePoint event on the Flex VideoPlayer object’s inner VideoElement object and then using the mx_internal namespaced fl.video.VideoPlayer object.
Full code after the jump.
The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/05/26/listening-for-cue-point-events-on-a-spark-videoplayer-object-in-flex-gumbo/ --> <s:Application name="Spark_VideoPlayer_VideoElement_flVideoPlayer_cuePoint_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"> <fx:Script> <![CDATA[ import fl.video.MetadataEvent; import fl.video.VideoPlayer; import spark.events.VideoEvent; private function videoPlayer_metadataReceived(evt:VideoEvent):void { var flashVideoPlayer:fl.video.VideoPlayer = videoPlayer.videoElement.mx_internal::videoPlayer as fl.video.VideoPlayer; flashVideoPlayer.addEventListener(MetadataEvent.CUE_POINT, videoPlayer_cuePoint); } private function videoPlayer_cuePoint(evt:MetadataEvent):void { var obj:Object = {}; obj.name = evt.info.name; obj.time = evt.info.time; obj.type = evt.info.type; arrList.addItem(obj); } ]]> </fx:Script> <fx:Declarations> <s:ArrayList id="arrList" /> </fx:Declarations> <s:Panel id="panel" horizontalCenter="0" verticalCenter="0"> <s:layout> <s:HorizontalLayout /> </s:layout> <s:VideoPlayer id="videoPlayer" source="http://helpexamples.com/flash/video/cuepoints.flv" muted="true" metadataReceived="videoPlayer_metadataReceived(event);" /> <mx:DataGrid id="dataGrid" dataProvider="{arrList}" height="100%"> <mx:columns> <mx:DataGridColumn dataField="name" /> <mx:DataGridColumn dataField="time" /> <mx:DataGridColumn dataField="type" /> </mx:columns> </mx:DataGrid> </s:Panel> </s:Application>
View source is enabled in the following example.
This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.
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
How come in this previous article (http://blog.flexexamples.com/2009/05/24/toggling-smoothing-on-a-spark-videoplayer-object-in-flex-gumbo/), you used:
videoPlayer.videoElement.videoObject
…without the mx_internal namespace, and in this one, you used:
videoPlayer.videoElement.mx_internal::videoPlayer
?
Joeflash,
Correct. What’s happening is I have a Spark VideoPlayer control. This control has all the playback “chrome”, such as play/pause/stop buttons, playheads, volume buttons/sliders, and fullscreen buttons.
Inside the VideoPlayer skin is a VideoElement control/primitive. This is basically a chromeless video player.
So, this is where/why they’re different.
The
videoObjectobject is a reference to the underlying flash.media.Video object.The
mx_internal::videoPlayerobject is a reference to the underlying fl.video.VideoPlayer object (the Spark VideoPlayer control uses the FLVPlayback control/classes under the hood).So, it is a little confusing. The spark.components.VideoPlayer control’s skin has a reference to a spark.primitives.VideoElement object, which has an
mx_internalnamespaced fl.video.VideoPlayer control, as well as a reference to a flash.media.Video object.Did that even remotely answer your question on any level?
Peter
Oh, and I forgot my old
mx_internaldisclaimer I used to add to posts like this. Any APIs in themx_internalnamespace are subject to change in future releases (point releases, or nightly releases) of the Flex SDK. So even though it may work today, it could break at any point in the future.Programmer beware!
Peter
I am using a flex 4 sdk (flex_sdk_4.0.0.7219)with flex builder 3,
when i want to run the application it is showing application.html is not found
what are the changes i need to do so that the application will run.
kkc,
Make sure your Flex project’s /html-template/ folder isn’t empty. Also, I highly recommend downloading the Flash Builder 4 beta (formerly Flex Builder) from http://labs.adobe.com/
Peter
Interresting !
But in my case, I imperatively need to exploit external cuepoints listed in an xml. How can I manage it with Flex 3 and Spark VideoPlayer ?
Thank’s for your answer ;)
…meant Flex 4 and Spark VideoPlayer of course !
@kouri,
I’m not sure that cue points are fully supported in the Flex 4 VideoPlayer w/ OSMF yet. In fact, I don’t even know if this example still works in the latest nightly Flex 4 builds.
Peter
Looks good – exactly what I have spent a week looking for … except it does not work.
Had to track down the fl.video SWC component – which I added to my libs folder.
(Using flexbuilder 4).
Got a host of errors
Type not found on videoEvent – spark does not seem to have a videoEvents component changed that to Event to make the error go away
Then got access to undefined property on videoElement. Eventually trashed all the code in the videoPlayer_metadataReceived function and replaced with
videoPlayer.addEventListener(fl.video.MetadataEvent.CUE_POINT, videoPlayer_cuePoint);
And got another error
cannot resolve attribute metadataReceived for spark.components.VideoPlayer
I have been trying for a month to find code in flex that works for catching cue-points in an FLV and yours was the closest I have come.
Any ideas on how your code can be “modified” to compile for Flex 4
@JHansen,
The Flex 4.0 VideoPlayer code was changed significantly between when I originally wrote this example and when 4.0 shipped. If you need cue point support, I’d probably stick with the older mx:VideoDisplay control until Flex officially supports cue points with a newer version of OSMF.
Peter