November 2011: I'm actively researching and updating the information below as a result of a current project which has revealed some quirks using the <video> element. Stay tuned for some useful revisions!

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 using flowplayer. 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

<video width="320" height="180" controls="controls" onerror="fallbackFlowplayer();">
    <source src="video/example1.ogv" type="video/ogg" />
    <source src="video/example1.mp4" type="video/mp4" /> 
    <script type="text/javascript">fallbackFlowplayer();</script>
</video>
<!--[if IE]>
    <script type="text/javascript">fallbackFlowplayer();</script>
<![endif]-->
	 

<script type="text/javascript" src="../js/flowplayer.min.js"></script>
<script type="text/javascript">
  function fallbackFlowplayer() {
    flowplayer("videoWindow", "../flash/flowplayer.swf", { 
        clip:  { 
           autoPlay: false, 
           autoBuffering: true
           }, 
        playlist: [
           "video/example1.mp4"
           ]
        });
    }
</script>