Update 20/11/07: Due to the large amount of interst in this post, I’ve had to replace the example with a shorter video. I found another cool one though.
Here’s the final version of my BufferingVideoDisplay component. I mentioned that I was playing around with this a while ago in a previous post but got stuck trying to get the bitrate of the loading FLV file. It turns out that there isn’t a way to get the bitrate of a FLV from within flex (not that I could find at least), so I approximate it by dividing the size of the video file by its duration.
Click on the image to view the application. Right click on the application to view the source.
The Problem
We want to be able to intelligently set how much of a video should be buffered We want a video display component in flex, which can sample the user’s bandwidth and intelligently buffer the correct amount of video required for continuous playback, without requiring Flash Media Server.
The Solution
Build a custom video display component which is able to sample the user’s available bandwidth and intelligently determine how much of the video it should buffer before beginning playback. I will explain briefly how this is achieved here. For full details you can view the source of the component here.
- This component first downloads a sample file, and uses the size of that file combined with the time it took to download to determine the available bandwidth. Smaller test files mean less overhead, but also less accurate results. The file being used in the above demo application is 150 KB.
- The component waits until the user’s bandwidth has been detected, and the size and duration of the video file are known. The size and duration are then used to calculate the bitrate of the video file before a simple bit of math determines how much of the video should be buffered to allow continuous playback.
- This value it assigned to the bufferTime property of the VideoDisplay component, and flex takes care of the rest. This gives a simple but effective solution.
Possible Improvement
As with all the code on this site, feel free to copy/use the code in any way which might help you. I don’t think I will be making any changes to this component in the foreseeable future, but to make this into a really reusable component the BandwidthTester class should be made to use the singleton pattern. This would prevent multiple instances of the BufferingVideoDisplay component from all sampling the user’s bandwidth individually.
I’m sure there are heaps of other improvements that could be made. If you do use some version of this code in one of your projects, I’d love to hear about how it worked for you.
Fly me to the moon… »« Yay for birthdays!
Just thought I’d mention, the video in the example is of New Zealand group Flight of the ConChords. They have a TV show playing in the states at the moment (on HBO I think) which airs down here starting on Monday night!
Also, getting the FLV metadata is possible in Flex3, just not in Flex2. FlexExamples has a good example of how to do this in Flex3 here
Hi Tony,
First, thanks for this great resource on Flex… you Kiwis are the best!
I tried to implement the VideoDisplay component in FB2 the other day…
My intention was to create a video player that used a series of buttons to load a corresponding FLV file
All was going well (the application was laid out nicely, the buttons were all arranged, and the VideoDisplay comp was in place)
I had the source property of the VD set inline (in the
my first comment was truncated:
quick take: when the source property is set either inline or programmatically, one video plays.. when I try to change the video programmatically, I get NO_BITRATE_MATCH error.
this is true for my original app and for your BufferingVideoDisplay app
all the FLV files were created at same framerate, using Camtasia Studio
thanks
Hi, sorry about the truncation. I didn’t know it did that 
A NO_BITRATE_MATCH error usually occurs when you try to play (or pause/stop), a VideoDisplay when it doesn’t have a video loaded.
So if you have autoLoad set to false (that’s not the exact name, but it’s something like that), then you can’t call play() until you have called load().
By default, setting source does call load() however, so I’m not sure that’s your problem.
It’s very likely that you are trying to call play(), pause() or stop() somewhere in your program when there is not a video loaded.
Hope that helps
Tony
As I said at the top of the post, I’ve had to replace the video in the example with a slightly shorter one to save on bandwidth.
You can find the origional Flight of the Conchords video here: http://www.youtube.com/watch?v=WGoi1MSGu64
Also, the easiest way to download YouTube videos is here: http://www.techcrunch.com/get-youtube-movie/
Hi Tony,
A nice and pretty useful customization for the VideoDisplay component. Thanks for sharing it.
-Anish
But, the bandwith is totally dynamic isnit? So you should calcul it the most time possible not just 1 time and especially, NEVER calcul your bandwith when your app starts because the browser is loading other files such as CSS, HTML, other images… so you get a totally wrong value!
Instead you should use the progressevent of the video player to calcul the bp. The value will be more accurate.
FrenchTom
Hi Tom
You’re right that you could use the progress events coming off the VideoDisplay itself to set the buffer time. That would be a much cleaner way of implementing the behavior.
My experience is that the speed measurement is at best a crude measure however, and that things generally work out best if you don’t try to make things too accurate.
Hi Tony,
I know this is a bit different to what your custom video display component does so feel free to tell me where to go, but I thought you might be able to give me a bit of advise based on your knowledge of flex’s inbuilt video display component.
I am having some serious problems with video performance. Let me try and explain in a little more detail – I am using flex to build a jukebox application that supports audio (mp3 files) and video (flv files). It’s actually an AIR app that will run on the user’s desktop playing files stored locally. The mp3 side of my app works perfectly well with no problems what so ever, however there is a major issue I am having with the video player… the video loads fine and begins to play without any problems but as soon as there is any interaction with the app’s interface the video begins to stutter/stop for a few milliseconds before continuing to play once more?
At first I thought this was simply a memory issue I had with the machine I was using to develop the app but I upgraded my RAM to 6GB (yes that’s right – a full 6 GB) and the issue still persists?
Any ideas or suggestions you have regarding this problem would be hugely appreciated!
Many Thanks
Adam
Your project compiles with Flex SDK 3 and runs under Adobe Flash Player 10, but does not seem to do anything…?
Nevermind. I was running the .swf directly, but when I created a projector and ran the .exe it worked fine.
