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.
<?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:
<?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>
{ 6 comments… read them below or add one }
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.
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
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
totalTimeproperty changes, and then uses theupdateCompleteevent to trigger some arbitrary function (in this case a call toAlert.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
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
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…
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;