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

Recursive delete invisible svn files

This terminal command will remove any files with a file extension of .svn.  This is a nice way to clean up repos.

find . -name ‘.svn’ | xargs rm -rf

Developed brand identity for MoveUp2One

Spent a little time working on the brand identity for MoveUp2One.

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.

Chapters in video

When uploading a video to a site, there’s definitely use for keyframe images as previews.  I was thinking about using the nginx streaming-flv module to feed up individual frames of a video, but I concluded that exporting the required frames as pngs or jpegs is way more practical.  Once again, I’m using ffmpeg to grab individual frames from an flv and xport as pngs.  Heres the code:

ffmpeg -i awards.flv -vcodec png -vframes 1 -ss 120 -an -f rawvideo -s 320×240 testoutput.png

  • -i: the input video
  • -vcodec: the output codec.  In this case png
  • -vframes: the number of frames to output.  I only want 1 frame as the image
  • -ss: number of seconds into the video to grab the screen-shot
  • -an:
  • -f: for the format of the video
  • -s: size of the output
  • testoutput.png is the name of the resulting image.

Snap and Drag Screen Shots

One of my friends just passed along an interesting tool called Snap and Drag: http://www.yellowmug.com/snapndrag/ .  Some of it’s keyfeatures include taking screen shots off of dvds playing in iDVD.  Extremely handy.

Batch video conversion with ffmpeg and Ruby

Decided to write a simple script for exporting all my video content to streaming .flvs:

in batchconvert.rb

path = “.”
#contains = Dir.new(basedir).entries
videos = Dir["#{path}/*.mov"]
videos.each do |f|
puts “converting #{f}”
newFile = f.gsub(“.mov”, “.flv”)
system(“ffmpeg -i #{f} -ar 22050 -s 640×480 -b 500000 #{newFile}”)
system(“flvtool2 -U #{newFile}”)
end

To run this command, open up the Terminal and navigate to your video directory.  Then run:

ruby batchconvert.rb

This script doesn’t include any switches or options for files other than .movs.

Files: batchconvert

Flash IDE player is not the real world

Every flash developer has used the Flash IDE to debug and test his/her application.  Simple test the movie and you get a quick preview of your application.  However, the player in the flash IDE isn’t a standard player.  Here’s a list of things that will surely grow as my testing continues:

  • Flash IDE has no crossdomain security because it assumes that anything loaded while testing is safe.  When testing cross domain issues, I tend to use javascript calls to console.log(a feature in firebug) to output errors.
  • Flash IDE does not support stage.addEventListener(Event.MOUSE_LEAVE, foo).  This command is ignored when moving the mouse off the stage.  It seems to work when the application is slotted in a webpage.
  • URLs with params do not work in flash IDE.  IE….. a relative path like “./event.jpg” is not logically equivalent to “./event.jpg?timestamp=123″ .  Flash IDE doesn’t know how to interpret the get params and throws errors when attempting to find event.jpg.