Listening for cue point events on a Spark VideoPlayer object in Flex 4

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 www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see 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.

10 thoughts on “Listening for cue point events on a Spark VideoPlayer object in Flex 4

  1. 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 videoObject object is a reference to the underlying flash.media.Video object.
    The mx_internal::videoPlayer object 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_internal namespaced 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

  2. Oh, and I forgot my old mx_internal disclaimer I used to add to posts like this. Any APIs in the mx_internal namespace 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

  3. 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.

  4. 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 ;)

    1. @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

  5. 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

    1. @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

Comments are closed.