29
Dec
08

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>

3 Responses to “Determining the length of an FLV video using the VideoDisplay control in Flex”


  1. 1 Flash Free Jan 3rd, 2009 at 9:52 am

    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. 2 Claudius Tiberiu Iacob Jun 22nd, 2009 at 1:52 pm

    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. 3 Peter deHaan Jun 22nd, 2009 at 6:36 pm

    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

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;".




Badge Farm

  • Powered by Redoable 1.2
  • Cornify
  • Feeds burnt by Feedburner
  • Feed