Flex Examples
A simple example of creating and using ActionScript cue points with the VideoDisplay control. The example uses a VideoDisplay control to display the progressively downloaded video, a ProgressBar to display the amount of video that has played back, and two DataGrid controls to show ActionScript cue points and embedded cue points.
Full code after the jump.
The following example creates a series of ActionScript cue points using the <mx:Array> tag and adds them to the VideoDisplay control by setting its cuePoints property. It also demonstrates how you can use a ProgressBar control to display the video playback status using the playheadUpdate event and the ProgressBar control’s label property:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.CuePointEvent;
[Bindable]
private var embeddedCuePoints:ArrayCollection = new ArrayCollection();
private function onCuePoint(evt:CuePointEvent):void {
var cuePointObject:Object = {name:evt.cuePointName, time:evt.cuePointTime, type:evt.cuePointType};
if (evt.cuePointType != "actionscript") {
embeddedCuePoints.addItem(cuePointObject);
}
}
]]>
</mx:Script>
<mx:Array id="cuePointArr">
<mx:Object name="one" time="1" type="actionscript" />
<mx:Object name="two" time="2" type="actionscript" />
</mx:Array>
<mx:VideoDisplay id="videoDisplay" cuePointManagerClass="mx.controls.videoClasses.CuePointManager" cuePoints="{cuePointArr}" cuePoint="onCuePoint(event)" source="http://www.helpexamples.com/flash/video/cuepoints.flv" playheadUpdate="progressBar.setProgress(videoDisplay.playheadTime, videoDisplay.totalTime);" />
<mx:ProgressBar id="progressBar" mode="manual" width="{videoDisplay.width}" minimum="0" maximum="{videoDisplay.totalTime}" label="{videoDisplay.state} %3%%" />
<mx:HBox>
<mx:Panel title="ActionScript cue points:">
<mx:DataGrid id="actionScriptCuePointGrid" dataProvider="{videoDisplay.cuePoints}">
<mx:columns>
<mx:DataGridColumn dataField="name" headerText="Name:" />
<mx:DataGridColumn dataField="time" headerText="Time:" />
<mx:DataGridColumn dataField="type" headerText="Type:" />
</mx:columns>
</mx:DataGrid>
</mx:Panel>
<mx:Panel title="Embedded cue points:">
<mx:DataGrid id="embeddedCuePointGrid" dataProvider="{embeddedCuePoints}" itemClick="videoDisplay.playheadTime = event.currentTarget.selectedItem.time;">
<mx:columns>
<mx:DataGridColumn dataField="name" headerText="Name:" />
<mx:DataGridColumn dataField="time" headerText="Time:" />
<mx:DataGridColumn dataField="type" headerText="Type:" />
</mx:columns>
</mx:DataGrid>
</mx:Panel>
</mx:HBox>
</mx:Application>
If you prefer to define the cue point array in ActionScript rather than MXML, you could use this snippet instead:
[Bindable]
private var cuePointArr:Array = [{name:"one", time:1, type:"actionscript"}, {name:"two", time:2, type:"actionscript"}];
Or…
[Bindable]
private var cuePointArr:Array;
private function initCuePoints():void {
cuePointArr = new Array();
cuePointArr.push({name:"one", time:1, type:"actionscript"});
cuePointArr.push({name:"two", time:2, type:"actionscript"});
videoDisplay.cuePoints = cuePointArr;
}
You can also define the ActionScript cue points directly within the VideoDisplay MXML tags, like so:
<mx:VideoDisplay id="videoDisplay" cuePointManagerClass="mx.controls.videoClasses.CuePointManager" cuePoint="onCuePoint(event)" source="http://www.helpexamples.com/flash/video/cuepoints.flv" playheadUpdate="progressBar.setProgress(videoDisplay.playheadTime, videoDisplay.totalTime);">
<mx:cuePoints>
<mx:Object name="one" time="1" type="actionscript" />
<mx:Object name="two" time="2" type="actionscript" />
</mx:cuePoints>
</mx:VideoDisplay>
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
Yes, sounds good, but what I am looking for is a way to READ embedded FLV-cuePoints and put’em into a list. Furthermore it would be nice to reference the flv video source by a flashvar
source=”file”
then file would be a flashvar.
cheers, Florian
I tryed your solution today, and I maybe found a bug. If you click on an embedded cue point, another cuePoint is added to the grid. Is that correct?
Yeah, it would be a bug in my sloppy code. I didn’t bother to check if a specific cue point already existed before pushing it on to the embeddedCuePoints ArrayCollection.
did you use flex 3?
Yes, I’m using Flex Builder 3 from http://labs.adobe.com, as well as a fairly recent nightly build of the Flex 3 SDK.
Okay, I should use that too.
Another Question: I want to cuePoint TIME and NAME set by flashvars…so that you can set them dynamically…
cheers, Flo
Florian,
You want to set one cue point, or multiple cue points?
Update: Check out “Dynamically creating ActionScript cue points from FlashVars received from the HTML container” for one solution. Basically you just define the “FlashVars” parameter in your <object /> and <embed /> code, or from within your AC_FL_RunContent() JavaScript function in your HTML template, and pass something like the following:
"FlashVars", "cuepoints=one:1;two:2;three:3"This will create three cue points in your Flex application:
Of course, you’ll need a bit more code in your Flex application, so check out the post for the full details.
Happy Flexing!
Hello,
I appreciate your code for my comprehension of VideoDisplay.
I’m trying to use it with this URL :
source=”http://cache.googlevideo.com/get_video?video_id=SFf6n8QwOJ8″
What is wrong with my comprehension ?
Thinks by advance,
Laurent
Laurent,
I’ve never tried loading YouTube videos into Flex/Flash personally, but try giving these two blog posts by Abdul Qabiz a read:
“Constructing YouTube FLV URL on client-side without any server-side script” and “YouTube changes crossdomain.xml ?”
Good luck, and happy Flexing!
Hi peterd,
I am trying to do karaoke recording with flex and streaming server.
When souce video from server starts playing, I will have to start recording users’ vocal with another netstream.
Source video is just displaying lyrics to users.
Currently, there is no checking code for if the souce video really starts playing, so I will have audio/video un-sync problem, especially when they have buffering time.
So, I am thinking to put embeded cue-points in source flv videos at the very first frame, and wait for that cue-point event, and when that event occurs, just start recording. Also, put ending cue-point at the end of source flvs and check that end event and stop recording. Do you think that would be good solution for video-audio sync problem? Also, let me know how to differentiate those two cue-points in my onCuePoint event handler.
Thanks in advance.
Kevin
Hi Kevin,
Did you finally get the approach figured out?
Cheers. -Amitabh
Hi
I wanted to know how to put a progress bar on the video that is being played. This tutorial helped.
Thanks
Hi,
you have a great collection of flex examples here that helped a lot. But with this example, I found kind of an issue: if you declare the cuepointmanager class via actionscript, it doesn’t work. Do you know a workaround?
Hello,
How about clicking on the ActionScript cue points in the way of clicking the embedded cue points? Also why does a cue points show in the grid again when you click on such. Can you please show us some examples about this.
Thank you!
Hi,
How to create a karaoke player that displays lyrics and highlights the articulated word? Also, how can I multiplex it with a background score?