Streaming Video

Discussion: In 2009 I had the requirement to publish several "Web 2.0 RIA" High Definition videos on a client's website, and consequently investigated the wide range of choices available to accomplish this. There are easily a half-dozen potential solutions including .mov, .wmv, .avi, .mp4, .flv, and others. But in the end I concluded that Adobe Flash video provided the most effective solution for this requirement. A data point in the IEEE Computer Society's June 2009 issue reported that "98% of all Internet-connected PCs have a Flash player installed and the technology delivers 99% of all online video content viewed in the US" -- at least according to data gathered by Adobe. Statistics from StatOwl.com seem to bear this out, reporting that 97% of browsers have Flash support installed. I did observe that most videos I viewed during the process were in fact flv videos, and web stats from my own sites confirmed that the preponderance of visitors already had the Flash plugin installed -- importantly simplifying the user experience.

Naturally, this in turn led to days of next investigating Avid, Final Cut, Handbrake, Sorenson Squeeze, Windows Movie Maker, and other Mac and Windows products to facilitate cutting, editing, converting, compressing, and publishing Flash video.

Solution: Regardless of how you might import, convert, and compress an HD video to Flash video, it's the "every man's" and woman's solution, and furthermore it's a very straightforward matter to <embed> one or more Flash player(s) in a web page. That being said, I find that Flowplayer's API is handy for a variety of reasons. So, my conclusions for this requirement were Flash Video (.flv) with flowplayer, though I show some other options in the examples below.

Regardless of the player chosen, one thing to bear firmly in mind is the importance of video compression. The first video I published for this client was provided to me as an 80MB (3 minute) high definition DVD. Using Sorenson Squeeze, I compressed this to a 12MB Flash video, which was an important step since we've had as many as 800 viewers of this video over the course of a few hours.

Note that flowplayer will play a number of Flash-compatible formats including .flv, .mp4, and H.264, and I've verified support in IE 6+, Firefox, Safari, and Opera (with Javascript 1.5+ enabled). Beyond this, see an example of using the HTML5 <video> tag below with flowplayer as the fallback strategy for IE, which will not implement the <video> tag until the release of IE 9.

EXAMPLES OF EMBEDDED VIDEO

Flowplayer: Here's an example of multiple players on one page. These examples are short cuts of compressed high-definition, widescreen (i.e. 1.78:1 aspect ratio) videos that I imported from a pair of 32GB P-2 cards taken from a Panasonic AG-HPX camera shooting DVCPRO HD in January 2010. After roughly editing the raw video on a Mac, I compressed it with Sorenson Squeeze. Playing these is pretty standard Flowplayer fare in any browser, and this exact technique can be used to put an essentially unlimited number of players on one page. (You can view a production example of playing many HD videos on one page here. and an example of one larger video pane with "remote control" here). See playing the same video at left using the HTML5 <video> tag below.

HTML5  <video> TAG