New hulu styled open source video player.

Just created this open source video player styled like hulu.  It’s adapted and rewritten code from: http://chrisbrimelow.com/blog/?p=15 .  Some of the changes I made were pretty basic including separating the ui from some of the nitty gritty stuff that drives the video.  There’s also file streaming capabilities built into the player.

To take advantage of streaming video, I’m running nginx with flv-streaming-module compiled into my install.  Seems to work pretty well and handles tons of connections simultaneously.

Source code on github for this video project is located here: http://github.com/elguapo1611/opthumb-videoplayer/tree/master

Initialization phase of flash player in browser

Just thought I should share a little experience I had with embedding flash content on webpages.  If you’re application has a dynamic width and height (IE. You are sizing your content based on the size of the embed), you need to listen for Event.RESIZE to initialize your application properly. Here are a couple of implementation issues I’ve had with dynamically resized apps:

  • When you embed with Javascript, the stage size directly after load is 0×0.  IE… stage.stageWidth = 0 until the javascript kicks in and stretches the layout properly.
  • When you are not using javascript to embed flash content, the stage size is implemented properly if the .swf hasn’t been cached by the browser.  I ran into this issue where the flash file would implement the stage properly the first time.  However, when visiting the same flash page again, the stageWidth and stageHeight would start out as 0.

By adding a stage listener to detect resizes, issues of rendering the interface based on stage properties can be avoided.  I should mention that both cases of rendering the page on load and on resize must be implemented to avoid edge cases.

Crossdomain Bitmap Loading

Trying to load a bitmap crossdomain without the correct policy file.  Because of this, I can’t access the bitmapData within the loaded document which makes scaling the photos look horrible.  I’m going to try loading the ByteArray and translating it directly to a bitmap.  However, I’m not sure if this gets around the crossdomain issue.

update:

So…. loading the bitmapData as a byteArray using the netStream class seems to work.  I’m going to do a little load testing to see how fast this method is before proceeding.  Here are some resources:

update:

Although at first glance the previous solution seemed to work, it looks like I am still unable to use bitmapData.draw() on the display object that’s created.  I wrapped the some console logging around each step of the conversion process and it looks like everything goes to crap at: oBitmapData.draw(oSource, oMatrix) where oSource is the loaded file in a Loader class that I have forced a type convertion on.  The struggle continues.