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.
<?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>
Tagged with: totalTime
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
-
Add Widgets (Content Sidebar)
This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.
8 Responses to Determining the length of an FLV video using the VideoDisplay control in Flex
Leave a Reply Cancel reply
-
Categories
- Accordion
- AccordionHeader
- ActionScript
- AddChild
- AdvancedDataGrid
- Alert
- alpha
- Animate
- AnimateProperties
- Application
- Application (Spark)
- ArrayCollection
- BarChart
- baseColor
- beta
- beta1
- beta2
- Bitmap
- Bitmap/BitmapData
- BitmapData
- BitmapFill
- BitmapFill (Spark)
- BitmapGraphic
- BitmapImage
- BitmapImage (Spark)
- BitmapImageResizeMode
- Border (Spark)
- BorderContainer (Spark)
- Box
- BuildInfo
- Button
- Button (Spark)
- ButtonBar
- ButtonBar (Spark)
- ByteArray
- Camera
- Charting
- CheckBox
- CheckBox (Spark)
- ClassFactory
- CollectionEvent
- Color
- ColorPicker
- ColorUtil
- ComboBox
- ComboBoxArrowSkin
- Compiler
- Component
- Component (Spark)
- Configuration
- Container
- ContextMenu
- ContextMenuEvent
- ContextMenuItem
- CSSCondition
- CSSSelector
- CSSStyleDeclaration
- CurrencyFormatter
- CursorManager
- Data Binding
- DataGrid
- DataGrid (Spark)
- DataGridColumn
- Date
- DateBase
- DateChooser
- DateField
- DateFormatter
- Debugging
- DefaultComplexItemRenderer
- DefaultTileListEffect
- DropDownList
- DropDownList (Spark)
- DropDownListButtonSkin
- DropDownListSkin
- DropShadowFilter
- E4X
- Effects
- Ellipse
- EmailValidator
- Embed
- Event
- Fade
- FileFilter
- FileReference
- fill
- Filters
- Flash
- Flash Integration
- FlashVars
- Flex 3 SDK
- Flex Builder
- Flex Builder 3
- Flex SDK
- Flex4
- FLVPlayback
- FocusManager
- FontLookup
- Fonts
- Form
- Form (Spark)
- FormHeading (Spark)
- FormItem
- FormItem (Spark)
- Forms
- FTETextField (Spark)
- FullScreen
- FullScreenEvent
- FxAnimateColor
- FxButtonBar
- FxCheckBox
- FXG
- FxHScrollBar
- FxHSlider
- FxList
- FxNumericStepper
- FxRadioButton
- FxRotate3D
- FxScroller
- FxTextArea
- FxTextInput
- FxToggleButton
- FxVScrollBar
- FxVSlider
- getStyleDeclaration()
- GradientEntry
- Graphic (Spark)
- HBox
- HDividedBox
- HGroup (Spark)
- HorizontalLayout
- HorizontalList
- HSBColor (Spark)
- HScrollBar (Spark)
- HSlider
- HSlider (Spark)
- HTML template
- ID3Info
- Image
- Image (Spark)
- ImageSnapshot
- itemRenderer
- JointStyle
- Label
- Label (Spark)
- Legend
- LegendItem
- LigatureLevel
- Line
- LinearGradientStroke
- LineScaleMode
- LinkBar
- LinkButton
- List
- List (Spark)
- Menu
- MenuBar
- Metadata
- MetadataEvent
- Model
- Mouse
- MouseCursor
- MouseEvent
- Move
- Namespace
- NavigatorContent (Spark)
- needsSWF
- NetConnection
- NetStream
- Nightly Builds
- NumberBaseRoundType
- NumberFormatter
- NumberValidator
- NumericCompare
- NumericStepper
- NumericStepper (Spark)
- ObjectProxy
- ObjectUtil
- paddingLeft
- paddingRight
- Panel
- Panel (Spark)
- Parallel
- Path
- PieChart
- PieSeries
- PieSeriesItem
- PopUpAnchor (Spark)
- PopUpButton
- PopUpManager
- ProgrammaticSkin
- ProgressBar
- PropertyChangeEvent
- QName
- RadialGradient
- RadioButton
- RadioButton (Spark)
- RadioButtonGroup
- RadioButtonGroup (Spark)
- Rect
- RegExp
- Regular Expressions
- Repeater
- RichEditableText
- RichText
- RichText (Spark)
- RichTextEditor
- Rotate
- Rotate3D (Spark)
- Scroller (Spark)
- Sequence
- setStyle()
- SimpleText
- SimpleText (Spark)
- skinClass
- Slider
- SliderEvent
- SolidColor
- SolidColorStroke
- Sort
- SortField
- Sound
- SoundEffect
- Spinner (Spark)
- SpriteVisualElement (Spark)
- StageDisplayState
- States
- StringUtil
- StringValidator
- StyleManager
- Styles
- SWFLoader
- SWFObject
- System
- SystemManager
- TabBar
- TabBar (Spark)
- TabNavigator
- TabStopFormat
- Text
- Text Layout Framework (TLF)
- TextArea
- TextArea (Spark)
- TextBox
- TextConverter
- TextEvent
- TextFlow
- TextFlowUtil
- TextFormat
- TextGraphic
- TextInput
- TextInput (Spark)
- TextLayoutFormat
- TextView
- Themes
- TileLayout
- TileList
- TileOrientation
- Timer
- TitleWindow
- TitleWindow (Spark)
- TLF
- ToggleButton (Spark)
- ToggleButtonBar
- ToolTip
- Transition
- Tree
- TruncationOptions
- UIComponent
- UIFTETextField
- Updater
- URLLoader
- URLRequest
- URLUtil
- URLVariables
- ValidationResultEvent
- Validator
- Validators
- VBox
- VDividedBox
- Vector
- VerticalLayout
- VerticalLayout (Spark)
- VGroup (Spark)
- Video
- VideoDisplay
- VideoElement
- VideoElement (Spark)
- VideoEvent
- VideoPlayer (Spark)
- VideoPlayerScrubBar
- ViewStack
- VScrollBar (Spark)
- VSlider
- VSlider (Spark)
- XML
- XMLList
- XMLListCollection
- ZipCodeValidator
- ZipCodeValidatorDomainType
- Zoom
-
Articles
- December 2010
- November 2010
- October 2010
- September 2010
- August 2010
- July 2010
- June 2010
- May 2010
- April 2010
- March 2010
- February 2010
- January 2010
- December 2009
- November 2009
- October 2009
- September 2009
- August 2009
- July 2009
- June 2009
- May 2009
- April 2009
- March 2009
- February 2009
- January 2009
- December 2008
- November 2008
- October 2008
- September 2008
- August 2008
- July 2008
- June 2008
- May 2008
- April 2008
- March 2008
- February 2008
- January 2008
- December 2007
- November 2007
- October 2007
- September 2007
- August 2007
- July 2007
-
Meta


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;
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??????
@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