Determining the length of an FLV video using the VideoDisplay control in Flex

The following example shows how you can determine the length of an FLV video (in seconds) using the Flex VideoDisplay control by using the totalTime property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/12/29/determining-the-length-of-an-flv-video-using-the-videodisplay-control-in-flex/ -->
<mx:Application name="VideoDisplay_totalTime_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="totalTime:">
                <mx:Label text="{videoDisplay.totalTime}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:VideoDisplay id="videoDisplay"
            source="http://helpexamples.com/flash/video/cuepoints.flv"
            autoPlay="false"
            click="videoDisplay.play();" />

</mx:Application>

You can use the totalTime property using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/12/29/determining-the-length-of-an-flv-video-using-the-videodisplay-control-in-flex/ -->
<mx:Application name="VideoDisplay_totalTime_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="totalTime:">
                <mx:Label id="lbl" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:VideoDisplay id="videoDisplay"
            source="http://helpexamples.com/flash/video/cuepoints.flv"
            autoPlay="false"
            click="videoDisplay.play();"
            metadataReceived="lbl.text = videoDisplay.totalTime.toString();" />

</mx:Application>

8 thoughts on “Determining the length of an FLV video using the VideoDisplay control in Flex

  1. this is good because you can display on screen how long the video is to the user before he actually loads the video, this is a good idea to save bandwidth, and time for the user. I wouldn’t click on a video that is 2 hours in length if I only have 15 minutes to watch a video, and if that video loads all the way, that means I lose bandwidth because the user downloaded that whole video.

  2. Hi Peter,

    I thought that maybe it would be nice to warn people on just how bogus the totalTime property is, since it relies on the “metadataReceived” event, which fails to fire most of the time.

    The bug, which causes totalTime to be “-1” when it has no metadata to rely on, is known and has been deferred to Flex 4 :( :
    http://bugs.adobe.com/jira/browse/SDK-14948

    I’m really eager to know if anyone has found a working workaround to this, please drop me an email if you did, I couldn’t make it work hard as i tried.

    Thanks,
    C

  3. Claudius,

    Assuming adding some bogus video metadata isn’t a feasable workaround, how about something like this:

    <mx:Label id="lbl"
            text="{videoDisplay.totalTime}"
            updateComplete="Alert.show(videoDisplay.totalTime.toString());"
            visible="false"
            includeInLayout="false" />
    

    Pretty odd workaround, but it basically uses data binding to determine when the totalTime property changes, and then uses the updateComplete event to trigger some arbitrary function (in this case a call to Alert.show() to display the video’s duration).

    I’m sure the code could be refined, but this was one of the first things to come to mind.

    Peter

    1. Hey Peter,

      I think I managed to narrow down this bug — I still do consider it a bug:
      – metadata will arrive just fine the very first time the movie is loaded by my application; that is, open Firefox, type application’s URL in the address bar and you’re set;
      – however, metadata will fail to be there if I cause the same application to be loaded again, but in a second Firefox tab.

      I’m not sure your workaround tackles it. That listener will fire when the “videoDisplay.totalTime” property is updated from NaN to -1. Then it will fire again when the “videoDisplay.totalTime” property gets updated form -1 to , but that’ll only happen after the movie has played once — which is actually the bogus behavior.

      Take care,
      C

      1. Erata
        Instead of:
        “Then it will fire again when the “videoDisplay.totalTime” property gets updated form -1 to , ”
        Read:
        “Then it will fire again when the “videoDisplay.totalTime” property gets updated form -1 to [correct value],”

        Sigh, I had this bad inspiration to surround “correct value” in angled parenthesis…

  4. Claudio:
    As far as I found out the -1 problem only appears if the video gets loaded from the browser cache.
    So I built a very simple workaround to “solve” that problem:
    I add ed a noCache-function at the end that forces flash to load the file directly from the server.

    Example:
    player.videoDisplay.source = URL+”?noCache=”+Math.random()*10000;

  5. i use a videoDispaly control and i try to get total time of the video but i get totalTime as -1 .
    i find lot on it but solution i found that use latest SDK for flex
    now i use 3.5 SDK but the problem i found same..
    Can anyOne help me on that??????

    1. @mack,

      Please file a bug at http://bugs.adobe.com/flex/ and include a simple test case. It may be the media or possibly if you’re using an RTMP stream the time may be incorrectly reported. Or perhaps like oliver said above, if the request is being cached by the server/client than the time gets returned as -1. But somebody at Adobe will be able to take a look once they see your test case and media.

      Peter

Comments are closed.