A few years ago, "online video" usually meant the stereotypical web experience of watching jerky, poor-quality movies the size of a postage stamp. Today's online video experience is a totally different ballgame. Now, online video can approach "TV-quality" clarity in picture and sound, even when viewed at full screen resolution.
If you are interested in putting video on the web, your first step is to get it ready for presentation. This involves capturing video from a tape or from your video camera, editing the video, laying in music and sound, and adding post-production effects. Video editing and production requires some knowledge of video capture hardware, and also software like Final Cut or iMovie. For an excellent introduction to these technologies, check out Reno's article on editing digital video.
Once your video is wrapped and ready to be viewed by the world, you'll need to compress it, and that's where I come in.
In this lesson, we will take a brief look at the main ingredients of video compression, including the difference between compression schemes, streaming versus downloadable video and the tools you'll need to compress the video for online distribution.
The key to creating a great video experience is choosing the right codec to use. “Codec” is the abbreviation for compression/decompression. A codec is usually a software program that compresses a raw video file into a small encoded video file, and also decompresses this video file later for playback. The resultant file is small enough to be distributed on the web, on CD-ROMs, DVD-ROMs, and so on.
Codecs are only one part of the streaming media ecosystem. First, you'll need to have an encoder to encode the video. The codec then compresses the video, the server will serve the video to users, and the player will actually play back the video on the user's computer. Usually the player itself will be embedded in a web page, but we'll get to that later.
All of these elements must be taken into consideration before choosing the codec and compression scheme, so let's look at them one by one. First, we'll cover the different ways you can deliver your video content to the user.
There are two basic ways of delivering video over the web: streaming and downloadable video. Let's look at the advantages and drawbacks of each.
Streaming Video
When you "stream" a video, the content is delivered to the user in a constant flow using an alphabet soup of protocols: RTSP, MMS and even good old HTTP. When the user's media player has enough of the stream, it will begin playing the content.
Delivering streaming video to a user is usually the work of a dedicated streaming media server program — these are often paired to a specific codec, and may require additional licensing fees. However, you can make a file encoded in any of the codecs listed here available on a standard Apache server, and allow users to either stream the video using HTTP, or download the file from the server and play it locally from their own machines. All the codecs we'll cover in this lesson have free or trialware encoders, and all of the players are free.
Streaming servers have advanced delivery features, and streaming video to users will usually give you the most professional results. Streaming servers with pro-level functionality allow for easier recovery from stream interruptions, live streaming and reduced scaling costs for large numbers of streams. Some server applications have a feature known as Fast Start, which enables streams to buffer quickly into the player.
These advanced delivery features give the user the best video experience possible. However, if you just want to enable simple playback of video from a web page, then you can just allow the users to download the video file by adding an HTTP link directly to the video file.
Downloadable Video
When you make video available for streaming, you are either providing a link in a web page to the file itself or a link that calls for an embedded player. If you provide a link to the file itself, the video file will play in a media player application on the user's desktop. If your video loads into an embedded player, the video file is played in a window embedded directly on the page.
This window-within-a-window effect gives you the most control over the video experience, since you can embed the video player in a page that contains more information about your video, and you can avoid having a separate player window pop up that may display additional advertising or other information unrelated to your content. For a nice tutorial on embedding Windows Media Player into your web pages, check out this article written by Webmonkey's own Adam Powell.
By default, video files you make available for download or streaming are usually not protected from redistribution. While you can add DRM (Digital Rights Management) to your files to protect them from redistribution, diving into that topic is another article unto itself. DRM standards are still emerging, so there is no single DRM industry standard. As a result, several different vendors are still fighting this standards war. If you'd like to learn more about Digital Rights Management, the Wikipedia has an introductory article which covers all of the important DRM issues.
Now that we've discussed the ways that video can be delivered to the user, we get down to the actual choice of the codec itself. All of the codecs have tradeoffs with regards to file format, compatibility, video quality, audio quality and licensing. I have gone ahead and listed several supported solutions below. However, for each codec, there are usually other encoders available, and there may be "unofficial" players available on other platforms as well.
QuickTime traditionally has been the format of choice for entertainment industry professionals, and is one of the three most prevalent Internet video formats, along with Windows Media and RealVideo. The basic QuickTime player is available for free. QuickTime Pro, which can encode video content in both Sorenson Video and MPEG-4, and create standalone MPEG-4 (MP4) files, is available for $29.99 from Apple.
Windows Media, a combination of the Windows Media Video codec with the ASF file format, is arguably the most popular streaming video format on the Internet. It is supported primarily on Windows, but a less robust Macintosh player is available. The codec and player are available for free, and the server is bundled for free with Windows Server. Any recent version of Windows ships with Windows Media Player, and current versions can be downloaded from Microsoft for Windows 98SE or later and MacOS X. The encoder is also available from Microsoft for free.
RealVideo is a combination of the RealVideo codec with the Real file format. RealVideo was one of the first online video codecs, and the RealPlayer is available on Windows, Mac and Linux. This codec provides good video quality, although the player tends to be burdened with marketing offers for various RealNetworks services. In recent years, this codec has begun to fall off in popularity in favor of the other codecs mentioned here. The Basic version of the encoder (otherwise known as RealProducer) is available for free from Real.
Flash Video is a combination of the Sorenson Spark codec and the Macromedia Flash Video file format, and has been rapidly gaining in popularity of late. For your users to play back your video, you need to embed a Macromedia Flash video player in a web page, and the actual video encoding is done with a Flash video encoder. The encoded video is presented inside of the Flash player, so users cannot play the files back without viewing them through an embedded web player. Also note that Flash Video playback requires Flash 6 or later. A Flash Video encoder with the Sorenson Spark codec is available on a trialware basis from Sorenson.
DivX, not to be confused with the failed DVD rental format of the same name, is a combination of the MPEG-4 codec and the AVI file format. DivX is commonly used only for creating downloadable files. While there is some work being done in streaming AVI files such as DivX, right now this format is best chosen when your users will be downloading instead of streaming your video content. The video quality is "near-DVD" even though video compresses down to web-friendly file sizes. The player and codec are free for Windows, Mac and Linux, and the DivX Pro encoder is available on a trialware basis from DivX.
Keep in mind that different platforms ships with different streaming media players by default. All new Macintosh computer ship with Quicktime player. Windows computers ship with Windows Media Player. Most platforms either ship with a recent version of Macromedia Flash, or users download it shortly after setting up their computer. Users may not already have RealPlayer installed, and unless they are already serious online video users, they probably do not have the DivX codec installed.
Which file format and codec you should use depends on the content that you want to stream and your target audience. For example, if you are planning to stream your indie movie trailer to an audience primarily consisting of Macintosh users, Quicktime is probably your best choice. For the ultimate in cross-platform compatibility, Flash Video would be an excellent choice. If you just want to deliver near-DVD-quality downloadable home movie of your new Pomeranian show dog, and your friends don't mind downloading a new codec, DivX would be a good option to consider.
Using this information on codecs, along with your knowledge of the type of web video experience that you want to create, you can then decide what codec scheme will work best for your users. By using the right codecs, you can create an online video production that gives users a truly immersive experience.
Once you've encoded your .flv file, you're ready to upload it to your website and wrap it in a Flash player so your users can see the content.
I've found a simple freeware Flash Video player that works well for 320x240 video content. This flash component is the aptly named
FLV Video Player,
http://www.videospark.com/index.php?ssp=24also more sophisticated here
http://www.flvhosting.com/index.php?sc=18&nid=55and it runs on any web server that has PHP enabled. Since the downloadable archive includes the source .fla file for the player, you can edit and enhance it as you see fit. In this example, we'll use the pre-compiled .swf file which is included in the download.
I took the sample implementation from the FLV Video Player's player.php file and modified it to only play a single Flash Video file. In this example, I'm going to play the beginning of the short film about nutria I'd like to promote. I did this by uploading the FLV Video Player file called "320x240.swf" to my web server, and then embedding the following HTML into my example page to make our Flash player appear:
HTML embed code: ( Also know as the object embed tag )
this is the lines of html code that embeds your FLV Player (Swf) into the web page
it acts much like the code for an image, referencing the height and width for the player
The player (swf) then CONNECTS to the FLV file thus enabling playback to occur, either by progressive or streaming server
A streaming server player (SWF) requires an ADDITIONAL setting called the RTMP path to the streaming server
sometimes looks like this
rtmp://12.34.56.78/def_inst/filename<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab
#version=7,0,0,0" width="320" height="240" id="320x240" align="middle">
<PARAM NAME=allowFlashAutoInstall VALUE=true>
<param name=Flashvars value="url=Nutria.flv">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="320x240.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="320x240.swf" swLiveConnect="true"
Flashvars="url=Nutria.flv"
quality="high" bgcolor="#ffffff" width="320" height="240" name="320x240"
align="middle" allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
Check out the example page on my site to see the results. Note that I've thrown in some javascript from the sample file to enable the popup mode of the Flash Video player.
Besides referring to the name of the .swf ("320x240.swf") that will play the .flv video file, there are also two references to the name of the .flv video file I'll be playing ("Nutria.flv"). Be sure to update the two .flv filename references included in the embed code with the name of your own .flv video file.
Search Articles
