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">Extended HTML markup for embedding video:
swfobject.registerObject("{{ video-DOM-ID }}", "9.0.115", "{{ path
}}/expressInstall.swf");
</script>
<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
- as explained above, and inside this blog (requires editing the blogger template, if you wanna try that out yourself)
