UPDATE July 2009, NEW Method: There’s now an easier way.
1. Export using this guide for your editor of your choice in the MP4 h.264/AAC format (no other format will work).
2. However, do TWO changes to the suggestions of these guides:
– Resolution: 640×360 (instead of the suggested 1280×720)
– Bitrate: 1 mbps
If you prefer HD quality, then use the suggested 1280×720 resolution, but don’t use more than 2 mbps bitrate (if your encoder supports VBR, do an average of 2 mbps, and a maximum of 4 mbps).
3. When the MP4 file is done exporting, then use this guide to make it streamable, and then download the JWFLV media player to embed your video on your site.
OLD METHOD:
Introduction
Here is how you can export your home-made camcorder widescreen NTSC videos from your (preferably Sony Vegas) NLE to your web site in Flash format. Please note, this tutorial is not about creating & adding videos to video sharing sites, but for hosting a video in Flash format on your own server.
The Method
1. Follow the first 5 steps from my previous tutorial.
2. Download the new Flash templates I have made ready for you and unzip them on the same folder as the “Untitled.avi” intermediate video and FFmpeg application (as explained in the link above). Use the 128×80 template version if your viewers are on dial-up or GPRS, use the 320×176 version for DSL and EDGE connections, and use the 640×360 version for cable and 3G connections. Finally, I also have a high-quality 480p template there. Double click the template you want your video encoded as and encoding will begin to create a new file called “VideoSharing-XXX.flv”.
3. In the meantime, download and unzip in a new folder the JW FLV Player. The only files you are interested from in there are the “swfobject.js” and the “flvplayer.swf”. Copy these two away, and delete the rest.
4. Modify or use the HTML file found in the flash.zip file you downloaded above in order to test your video code. Do not use visual HTML tools, you must learn to use a text editor to do this job right. Here’s how that code looks like:
<html>
<head>
<title>My home videos</title>
<script type="text/javascript" src="swfobject.js"></script>
</head>
<body bgcolor="#333333">
<center><font face="Arial, Verdana" size="2">
<p id="container">Get the Flash Player to see this video.
<script type="text/javascript">
var s1 = new SWFObject("mediaplayer.swf","mpl","256","180","7");
s1.addParam("allowscriptaccess","always");
s1.addParam("allowfullscreen","true");
s1.addParam("flashvars","&file=VideoSharing-128.flv&image=preview.jpg&volume=100&fullscreen=true");
s1.write("container");
</script></p>
</font></center>
</body>
</html>
As long as the HTML, the .flv video, the preview image, the “swfobject.js” and the “flvplayer.swf” files are all in the same folder on your server, it should all work fine. Now, if you want a second video on the same page, you must change all the parameter names from s1 to s2 etc, the player1 IDs to player2, the .flv filename and the preview image filename.
5. On the above HTML sample file I used a display area of 256×180, which is the better size for the 128×80 template:
var s1 = new SWFObject(“flvplayer.swf”,”mpl”,”256″,”180″,”7″);
I did this because the original 128×80 video is too small and difficult to see, and so I simply resized the display area. You don’t need to do this for the other templates, because the other ones are visible enough. The only thing to remember is that you always have to reserve an additional 20 vertical pixels to the template’s vertical resolution, because these accommodate the Flash Player’s controls. So, here is the code with all the correct display sizes for each template:
128×80: var s1 = new SWFObject(“flvplayer.swf”,”mpl”,”256″,”180″,”7″);
320×176: var s1 = new SWFObject(“flvplayer.swf”,”mpl”,”320″,”196″,”7″);
640×360: var s1 = new SWFObject(“flvplayer.swf”,”mpl”,”640″,”380″,”7″);
848×480: var s1 = new SWFObject(“flvplayer.swf”,”mpl”,”848″,”500″,”7″);
6. Regarding the preview image. If you don’t want to, you don’t have to create a preview image, the display area will just stay black until the user presses “play”. Although for aesthetic reasons, it’s nice to have one. You have to take a framegrab from your video and then save it exactly at the template’s video size you are using. For example, if you are using the 640×360 template, that’s how big the JPEG image must be. Make sure you save by optimizing the JPEG image so it’s not more than 5-15 KBs each (also be careful, Mac OS X has the bad habit of creating thumbnails inside your JPEG image and hence creating unnecessarily big filesizes).
7. That’s it, you are now ready to publish to your site! Who needs YouTube! Here’s my implementation below showing some of my own footage captured by the HDV camcorder Canon HV20.
An Alternative Method
Alternatively, you can use one of the h.264/MP4 templates (as shown in my previous tutorial linked above) and instead of using Flash, you can use Quicktime to present your videos on a web page. After you encode your .mp4 video using one of these other templates, you can use an HTML code that looks like this:
<center><embed src=”FILENAME.mp4″ width=”320″ height=”192″ autoplay=”false”></embed></center>
The Quicktime player requires 16 additional vertical pixels, so if for example you exported to 320×176, that would be 320×192, or if you exported in 480×270, that it would be 480×286 in the code above. The only two problems with the Quicktime method (instead of Flash), is that it is not as widespread as the Flash Player among users, and that it starts downloading the video even if you haven’t told it to playback, and so this will be bad news for your bandwidth allowance.
