How to put HD video on the web with latest flashplayer

First I want to make it clear that I am all for open web standards and requiring the latest flashplayer for showing some video on your site always degrades the user experience, no matter how much effort you put into avoiding that. So if you wanna depend on latest flashplayer, there must be a strong reason for it. Flashplayer 9.0.125 (released about a week ago) offering high quality codecs (h264/HE-AAC) might be such as strong reason, the audio/video quality is excellent and filesize of the videofiles is relatively small. Here the required steps to produce such a video and how to put it on a webpage without degrading the user experience too much.

Let's assume you already have your original video file in high quality and large file size, either form a HD video camera, a screen recording application or most probably as a result of post processing with a video editing software.

First you must transcode your media to h264 video / HE-AAC audio and put it in a mp4 fileformat. I assume there exists some software from Adobe which does that for you, but I am not familiar with their current commercial offerings. In my case I put together an open source toolchain to perform the transcoding.

Now you have the video as a *.mp4 file. Next you need to prepare your website to embed the video with a flash videoplayer (there are others which work equally well, just the code below probably neds to be slightly modified). The tricky part is that you require the latest flashplayer, so I suggest embedding via Javascript and with SwfObject, that allows to upgrade to the latest flashplayer via Adobe ExpressInstall, if Javascript is enabled. And what if Javascript is not enabled or not available at all ? There is a solution for that: "Extended" markup, which results in either the video or an alternative content (bur no easy upgrade via flashplayer ExpressInstall). Here the embedding steps in detail:

Load swfobject.js (Javascript library):

<script type="text/javascript" src="{{ path }}/swfobject.js"></script>

Register the video (via Javascript):

<script type="text/javascript">
 swfobject.registerObject("{{ video-DOM-ID }}", "9.0.115", "{{ path
}}/expressInstall.swf");
</script>

Extended HTML markup for embedding video:

<object id="{{ video-DOM-ID }}"
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800"
height="620">
 <param name="movie" value="{{ path }}/mediaplayer.swf">
 <param name="allowfullscreen" value="true">
 <param name="menu" value="false">
 <param name="flashvars" value="file={{ path_to_video }}&image={{
path_to_preview_image}}">
 <!--[if !IE]>-->
 <object type="application/x-shockwave-flash" data="{{ path
}}/mediaplayer.swf" width="800" height="620">
 <param name="allowfullscreen" value="true">
 <param name="menu" value="false">
 <param name="flashvars" value="file={{ path_to_video }}&image={{
path_to_preview_image}}">
 <!--<![endif]-->
 <h2>To view the video:</h2>
 <p>
   <a href="http://www.adobe.com/go/getflashplayer">
           <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
alt="Get Adobe Flash player">
         </a>
 </p>
 <!--[if !IE]>-->
 </object>
 <!--<![endif]-->
</object>

Remarks:

• all {{ path }} variables need to be replaced with the actual path or URL where you have your static content.
• {{ path_to_video }} : the path or URL of the actual video file
• {{ path_to_preview_image }} : path or URL of a preview image

Example:

• as explained above, and inside this blog (requires editing the blogger template, if you wanna try that out yourself)