Flex VideoDisplay and MP3 files

On January 1, 2012, in Flex, by Anuj Gakhar

I have been troubleshooting a Flex application which plays audio/video files using the Spark VideoDisplay component. I know that a VideoDisplay component is bit of an overkill to play just mp3 files, but why this application has been doing so, is out of the scope of this post. Rest assured, there are valid reasons for that. Anyways, one of the issues I came across was that if I set the source property of the component to a .mp3 file, it would not respect the “autoplay” property at all. ie even if I set autoplay=”false” – the mp3 file would still play the entire length and during that process, fire off the currentTimeChanged event, which in my application was causing problems.

Let’s look at some code. Here is the VideoDisplay component in it’s simplest form :-

[as3]
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import org.osmf.events.TimeEvent;

protected function currentTimeChangeHandler(event:TimeEvent):void
{
trace(event.time);
}
]]>
</fx:Script>

<s:VideoDisplay autoPlay="false"
currentTimeChange="currentTimeChangeHandler(event)"
source="http://media.anujgakhar.com.s3.amazonaws.com/tata.mp3"/>
</s:Application>

[/as3]

If you debug the above code, you will notice a lot of trace statements in the debug console, although the audio won’t be playing. But obviously, you are wondering why is the currentTime being changed behind the scenes. Well, I dug into the source code of VideoDisplay.as and found this out at about line 2260 :-

[as3]
// call play(), here, then wait to call pause() and seek(0) in the
// mediaSizeChangeHandler
//trace("videoPlayer_mediaPlayerStateChangeHandlerForLoading: call videoPlayer.play()");
videoPlayer.play();
[/as3]

Apparently, what it’s trying to do is load the video, figure out it’s width and height to display as the first frame (before it starts playing), and then reset it back to starting point. This works fine for video files (flv, f4v etc) but since, this is a MP3 file, there is no width and height involved, the resetting does not happen at all, and the file continues to play all the way to the end and hence, the currentTimeChange event being fired off.

Well, the fix is easy. Set the autoDisplayFirstFrame = “false” for MP3 files and that will make sure that the VideoDisplay component does not try to detect the first frame and won’t play the file as part of that process.

Not sure if this is any helpful to anyone, but I thought I would blog as I got stuck on this issue. If anyone knows a better solution, let me know.

Tagged with:  

5 Responses to Flex VideoDisplay and MP3 files

  1. Keith H says:

    Very helpful, make me more appreciate access to source for debugging.

  2. Roman Mikhailov says:

    Very interesting issue. Now i trying to manage video playback on Spark VideoDispay. Has some promlems with it. But you article quite opened my eyes in media with Spark =) Thanks.

  3. Pavel says:

    Thanks for that tip. Unfortunately, it doesn’t work with Flex3 VideoDisplay 🙁

  4. Thanks for digging into this. This is really a bug on Adobe’s part. The fix works on the Flex 4 components. I set the attribute on the mxml itself, not programatically in a script. That seems to work.

Leave a Reply to Pavel Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2011 Anuj Gakhar
%d bloggers like this: