One of the challenges we face as a global organization is that we have to account for a wide spectrum of bandwidths available to our users. On islands of Maldives, Bora Bora and Seychelles, and even at some land-based locations in Thailand, the bandwidth available is fairly low by today’s standards. These low-bandwidth locations roughly account for 10% to 15% of all our locations, based on 2010 figures. If we deliver web video of a bitrate suitable for the low end, then  the other 85% to 90% of users would have to suffer low-quality video.

Not wanting to invest money and time heavily to set up real streaming that can adjust to the available bandwidth in real time, we came up with the idea to use a bandwidth detector in the front, and serve up a video of an appropriate bit rate based on the detected bandwidth. The advantage of this method is that we do not need to spend time and money to provision costly real streaming service, and can still use regular web server to deliver web videos. The downside of it is that the bandwidth detection happens only at the beginning, and it does not know enough to adjust while the video is in play if the bandwidth condition changes. But that’s good enough for us.

With bandwidth detection in mind, I researched into available options using Flash, which I am familiar with. I tried a few of the AS3 based bandwidth detectors, and at least one of them (if I remember correctly, it is this one) appeared to be rather inaccurate – the detected speed varied from one extreme to the other which made me suspicious of its accuracy. They key problem with a Flash-based bandwidth detector is that it won’t work on iPad and other iOS-based devices. If you are fine with Flash-based detection method because you are doing the detection for your Flash-based project, then this one could be a $4 low-cost option that I found on FlashDen marketplace.

So I started to look at simpler and more reliable bandwidth detection method. And eventually I settled on using simple javascript and image files. I try to load 3 different image files instead of one, and calculate the average, and that proves to be more accurate. I place all the detection-related files in its own folder, so that when a project needs bandwidth detection, this folder can be dropped in. The only thing is that a project’s start url will need to point to the bwdetect.html file inside the detection folder. A few things may need to be adjusted in the bwdetector.js file  – for example, the threshold bandwidth value (which determines whether to serve up a higher quality or lower quality video), and the higher-quality version URL, and the lower-quality version URL.

Here are still many ways to improve on the method:

  • warn and alert users if their browsers do not allow javascript to run, or simply do not support javascript;
  • make the code into a class;
  • currently it only branches between two options: higher- or lower- bitrate versions; it can be made to support unlimited number of bandwidth levels and their matching destination URLs;
  • currently the start URL may not look pretty for project starting URLs, something can be done so that “bwdetect” or “bwdetector” does not need to appear in the project’s start URL;

Click here to download the source files.

UPDATE: while writing this post, I re-discovered the gem that is FlowPlayer – it has the capability to support bandwidth detection with the help of a bandwidth detection plugin. It can be set up to monitor the bandwidth and switch to an appropriate stream in real time, but that probably requires real streaming with RTMP protocal. I am more interested in what it calls bandwidth detection for “pseudostreaming”, and that will be something for future investigation. FlowPlayer also offers other good stuff such as clustering/load balancing, and support different stream servers like Wowza, red5, http, and etc.  I have to say that I am amazed at how versatile and powerful the true and tried FlowPlayer is; I have used it for a long time, and I am still discovering new uses and capabilities from time to time.


  • Digg
  • StumbleUpon
  • Sphinn
  • Facebook
  • Mixx
  • Google Bookmarks
  • Haohao
  • LinkedIn
  • Live
  • MyShare
  • MySpace
  • Reddit
  • Technorati
  • TwitThis

Related posts:

  1. Video Formats for the Web – F4V, MOV, or MP4?
  2. Web Video for Flash-enabled Browsers and Ipad – from MediaElement.js, and videojs back to FlowPlayer
  3. FLV to DVD – Doesn’t Work
  4. Turning a DVD into a Web-based Video Resource
  5. Converting a WMV to true DVD

Tags: , , , , ,

Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">