GETTING STARTED
Before we start discussing how to place video on your pages, you need to know exactly how the video files will be hosted. There are two options available: host the video yourself or use a video hosting service that allows easy embedding of the videos on a remote site (i.e.YouTube). The advantage to using YouTube or similar sites is that you don't have to worry about disk space and bandwidth costs and some technical details such as conversion of your video and creating the player code. The disadvantage is that you may be limited to a certain length and/or resolution and you and your users may be forced to view advertisements and a watermark from the hosting site. A lesser concern is the loss of control of your video and restrictive agreements that may be entered into if you use a third-party. If these concerns do not bother you or if your web hosting account has severe limits on bandwidth and disk space, then the third party service may be right for you.
If something above bothers you, that means you want to host the video on your own server. Great! There are just a few things to consider before you continue: disk space and bandwidth. Videos are big. Very big. Very, very big. They consume a lot of disk space on your server and can also result in a significant increase in your bandwidth. Before placing your videos on your site, check your hosting contract to see if there are any limits and disk space and bandwidth and if so, be careful. There are good, cheap ISP's that feature unlimited hosting and bandwidth so if you were looking for a reason to move to a new ISP, this may be it.
OBTAINING THE CONTENT
So now that your hosting plan is set, let's move on to the videos themselves. Generally speaking, we will start with video in one of the following formats:
AVI
MPG or MPEG
MOV
WMV
The above are the most common video file formats at this time. However, if you happen to own a digital video camera that records straight to DVD or mini-DVD disks that play in a standard DVD player, your video will most likely be in the .vob format. If so, then you may want to use the free VOB2MPG tool to extract the video from the DVD into the MPG format.
EDITING THE VIDEO
Video editing requires a fairly fast computer with decent amounts of disk space, RAM, and an above-average video card. In other words, don't try this on Pentium II. You can still edit (or attempt to) if your machine is not a top-of-the-line screamer, but don't be surprised if you run into problems. As for software, professional video editing suites such as Adobe Premiere can cost hundreds or thousands of dollars but most modern versions of Windows and Mac operating systems come with a free simple editor. Windows has Windows Movie Maker and Mac's generally have some version of iLife which features iMovie. Both programs can perform basic video editing tasks and have some ability to add special effects and transitions.
THIRD PARTY EMBEDDING
If you have decided to host your video on a third-party site then you are almost finished. You have your web site already and now you have the video in the right format and edited to your specifications. You will now need to visit the third-party site to create an account there and start uploading your video. Once the file is uploaded, you will receive instructions on how to embed the result into your web pages which will usually take the form of a short block of HTML code:
1: 2: 3: 4: 5: 6: | <object width="425" height="344"> <param name="movie" value="http://www.youtube.com/v/ZcskQV2A2cQ&hl=en&fs=1"></param> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <embed src="http://www.youtube.com/v/ZcskQV2A2cQ&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed> </object> |
In case you are interested, the above is actual YouTube embedding code (try it in your page). The video shows a friend of mine playing the flute. When you place the code in your web page and browse to the page on the server, you should see something like this:
There are two components to the video above. The first is an Adobe Flash "player skin" that encapsulates the video file and provides the interface controls at the bottom of the video (play/pause, seek bar, time, volume, full screen toggle). The second component is the video file itself which has been converted from your original format to the Flash Video format (flv) by the third-party.
DO IT YOURSELF EMBEDDING
If you are not using a third-party provider, then you need to be able to replicate the above which means obtaining a player skin (q.v.) and the ability to convert your video file to the Flash Video format (flv). All of the initial four video formats above can be embedded into a web page without a specific player skin but the drawback is that the end user must have the correct program installed (Windows Media Player or Quicktime) on their computer and correctly configured as a plugin for their browser. A surprisingly high percentage of users do not meet those requirements so you are better off using a skin because Flash is installed on about 90-95% of the browsers and Flash Video supports a method of streaming video without having to install a secondary server dedicated solely to that task. These two factors allow you to reach the most viewers with your video with the least effort and technical know-how.
There are a large number of Flash video player skins out there, but two stand out for being free for non-commercial use: The JW FLV Media Player and Flowplayer. If you are playing back videos and not selling access to them or using them to promote a professional activity, both players are completely free but do contain a small watermark that fades after a few seconds of playback. If your videos are commercial in nature, you will need to pay a small licensing fee to the developers. This fee is less than $100 and is paid once per domain name. So if you are a small business with a single domain name, a one-time payment grants you the license to play an unlimited number of videos with that player skin. In addition to maintaining compliance with the licensing agreement, payment will allow you to remove the developer's watermark from the player skin and grants some other specialized capabilities.
Now that you have the player skin, you need a way to convert your videos to the flv format. Your web hosting account may have the ability for users to upload and convert a video automatically, but for most users I recommend obtaining the free WinFF converter program. This program uses a graphical interface to send your videos through the FFmpeg converter which is found in most Linux builds and does a good job of handling nearly all video formats and outputs a fairly good quality flv using the default settings. You may also queue up hundreds of videos for batch processing but be warned that this can take a while. After running your videos through the converter, you are ready to proceed to the next step.
Once you have both the player skin and the video, you are ready to embed them in your web page. Like YouTube, this will take the form of a few lines of HTML code. Unlike YouTube, there is an extra file involved. The following code is taken from http://flowplayer.org/demo
1: 2: 3: 4: 5: 6: 7: 8: 9: | <head>
<script type="text/javascript" src="/js/flowplayer-3.1.1.min.js"></script>
</head>
<a href="http://e1p1.simplecdn.net/flowplayer/flowplayer-700.flv" style="display:block;width:425px;height:300px;" id="player"> </a>
<script language="JavaScript">
flowplayer("player", "/swf/flowplayer-3.1.1.swf");
</script>
|
The major difference between this code and the YouTube code is that two external files are referenced, flowplayer-3.1.1.min.js (a set of javascript helper functions) and flowplayer-3.1.1.swf (the Flash player skin). Don't worry, both files are included when you download the Flowplayer from its web site. If you choose to go with JW FLV Media Player, you will be using files with different names and a slightly different set of HTML code, but the principle is the same; two external files will be called in the HTML.
Loosely translated, the code above is performing the following actions:
1) Call the flowplayer-3.1.1.min.js file and make the functions in it available to us
2) Place a link to our movie (called flowplayer-700.flv in this sample)
3) Call a javascript function ( flowplayer() ) which takes the player skin flowplayer-3.1.1.swf and wraps it around the movie and prepares for playback
That's it. If you were to view the link above, you would see:
Upload all the files to your web hosting account and start watching your videos!
CONCLUSION
The purpose of this guide is to get designers started with web video and to do so without a large monetary investment. The tutorial relies heavily on free tools or sites that allow free hosting of videos and both sets of tools do have some limitations. As always, "you get what you pay for" so if you are trying to host high-definition video and stream it to thousands of users simultaneously, this guide will fall somewhat short in assisting you.
As you work with web video, you will learn of a large number of alternate embedding and streaming methods and each comes with its own set of abilities, advantages and drawbacks.
I welcome your feedback and comments and I thank you for reading.
Jason1178
bol