29
Jul
07

Creating ActionScript cue points with the VideoDisplay control

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>

10 Responses to “Creating ActionScript cue points with the VideoDisplay control”


  1. 1 Florian Jul 31st, 2007 at 4:43 am

    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

  2. 2 Florian Aug 7th, 2007 at 7:13 am

    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?

  3. 3 peterd Aug 7th, 2007 at 8:31 am

    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.

  4. 4 Florian Aug 8th, 2007 at 2:11 am

    did you use flex 3?

  5. 5 peterd Aug 8th, 2007 at 6:53 am

    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.

  6. 6 Florian Aug 9th, 2007 at 1:01 am

    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

  7. 7 peterd Aug 9th, 2007 at 5:32 am

    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:

    • Cue point name “one” at 1.0 seconds
    • Cue point name “two” at 2.0 seconds
    • Cue point name “three” at 3.0 seconds

    Of course, you’ll need a bit more code in your Flex application, so check out the post for the full details.

    Happy Flexing!

  8. 8 Laurent Aug 10th, 2007 at 2:12 am

    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

  9. 9 peterd Aug 10th, 2007 at 6:41 pm

    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!

  10. 10 kevin Aug 7th, 2008 at 9:20 am

    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

Leave a Reply

This blog is terrible at eating HTML tags. If you plan on posting code/XML, please escape your "<" characters as "&lt;" and your ">" characters as "&gt;".




July 2007
M T W T F S S
    Aug »
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

Badge Farm

  • Firefox 2
  • Powered by Redoable 1.2
  • Feeds burnt by Feedburner
  • Feed