I just finished creating the new Film Fest 2010 site at SUA. It features a FLV video being played with a theater overlay on top.

I made the video by taking a still image of the "screen", plugging it into iMovie HD and applying the Aged Film effect. Then I kept it at 5 seconds, exported it as a MOV at my needed horizontal resolution (624 pixels). I used ffmpegX to convert the MOV to an FLV file and used its cropping feature to make the video the size I needed (624x356).

The specs on the FLV are as follows:

  • 100 bit data rate
  • 12fps
  • Video size: 624x356 (Unconstrained)
  • Crop: 52 52 0 0 (top bottom left right)
  • No audio

That produced a 100KB FLV, which I still think is pretty high, but it's at least manageable. Here's how it all looks on the page:

image

For the FLV player, my requirements for were as follows:

  • Auto start
  • Endless loop
  • No controls
  • No watermark
  • Ability to view without JS or Flash

As you can see, I've accomplished all of this (works in IE6+, FF, Opera, and Safari) except that the "no controls" part is a hack. The FLV player I am using, FLV Flash Fullscreen Video Player, does not yet allow removing the control bar. However, because I am using an overlay it hides the control bar so the only time a user could see it is if they zoom in. It's not a big deal if that happens, as long as initially it shows correctly. The author is working towards allowing the control bar to be disabled.

Both FlowPlayer and JW Player, while awesome, have watermarks. I just needed something simple that could serve my purpose. I could possibly get around that by adding padding to the video itself on the bottom, but I don't think that's cool to do. Additionally, JW Player showed the preloading graphic when it restarted the video, not cool.

You can view source to see what I did to make it all work, probably the most important part being that wmode for the object tag is set to transparent in order to see behind the video when it's loading (displaying the static background image). It also allows for z-index positioning so that the overlay appears above the video.

If you know of a player that does have all the features I need, please let me know in the comments!