Video on the web used to have one major problem: video files are huge. Delivering large video files online is a problem because people can’t download them quickly enough to make them usable. But, with the advent of the Flash video format, services that compress, host and stream video files have proliferated.
Before the days of YouTube and Vimeo, there were two possible ways to publish video online:
- Cut your video files down to small clips that can be downloaded in a reasonable amount of time.
- Stream your video, using HTTP streaming or a streaming server.
Real Video, Windows Media, MPEG and Quicktime were the most common video formats for both streaming and non-streaming situations. Each can be played on both Macintosh and PC, but the right player had to be installed, leading to end-user frustration and video publishing headaches. Do you create a different version of your video for each format? Or expect that your audience will have the right player (or be willing to install it).
Modern video publishing
Fortunately, those days are gone. Now, the best approach is a Content Delivery Network (CDN) likeBrightcove or Akamai or a free video sharing service like YouTube or Vimeo. These services take your video files, in several different formats, and convert them to Flash while compressing them so they are smaller in size and transfer faster over the Internet, meaning less wait time for your audience. They also offer embed codes so that you can publish the videos on your website meaning your users won’t have to leave your site to view the video content.
Most services even handle high-definition (HD) video files and serve them in their native 16:9 aspect ratio.
In addition to YouTube and Vimeo, other video sharing services include Blip.tv and MetaCafe.
Uploading your video
Each of these services make it drop-dead simple to publish video. You have to create an account first, then you follow the clear instructions on each site to upload the video file.
Before you upload, though, there are some steps you can take in your output that will ensure the highest possible quality after it is compressed by the robots at YouTube or one of the other sites. Here are the recommended specifications for a video file that you want to publish online:
Resolution: 1280 x 720 (16×9 HD) and 640 x 480 (4:3 standard)
There is no required minimum resolution, but the higher resolution, the better. HD resolution is naturally better than standard definition (SD).
Bit rate: Video should be optimized for resolution, aspect ratio and frame rate rather than bit rate.
Frame rate: The frame rate of the original video should be maintained without re-sampling.
Codec: H.264, MPEG-2 or MPEG-4 are preferred by YouTube while Vimeo prefers H.264.
Audio: The sample rate shold be 44.100 kHz and the codec should be AAC.
Exporting a Movie
Using Premiere or other video editing programs, you can generate the files that can be uploaded onto the web. Each program has an “export” function, usually found by choosing File > Export > Movie or something similar. In the resulting menu, find a link to the Settings and make the necessary adjustments.
Streaming
When a file is streamed, it is broken into a series of tiny packets that are then reassembled by the player in the correct order. The advantage of creating all these tiny pieces is that the pieces download more quickly and can be played before the file is entirely downloaded. For a very large file (which most video files are), this is really the only way to avoid huge delays while waiting for a download.
Streaming is also the only way in which live video can be watched, since by its very nature it’s not possible for it to ever be downloaded in full.
Artifacting
Artifacting is when you get “residue” from one part of the screen bleeding over to another part, or from an earlier or later section of the movie. Because of the compression calculations commonly used, it’s more common in red areas, like skin or fire.
Pixelation
Pixelation is when you can see a blockiness or jagged outline because a small video is being displayed too large, or a video is compressed too much.
All the digital video formats used to deliver video over the web are compressed – that is, some of the data is eliminated in order to create a smaller file. This is what causes some of the artifacting and pixelization you may have seen in online video. Another way for the file size to be made smaller is if the actual picture is small. All of this means that video files online never look as good as TV images.
Usually the players for streaming files are free to the user. It’s the server software and encoding software used by the creator of the video and audio that costs money.
As you look for a web host that offers video hosting, be sure to pay attention to how many simultaneous users you can handle. If you plan to do live events or put up files that will be very popular, you will need more simultaneous licenses.
Some web hosts advertise HTTP streaming instead of offering a server streaming solution. Don’t be fooled; HTTP streaming is not true streaming. While the file is still broken down into pieces, each piece is downloaded one at a time by the client, who then has to wait for enough of them to download before the clip can be played continuously. If you or your users have a slow download rate, they’ll be waiting a while before they see anything.
Server-side streaming controls the rate at which it hands out data, sometimes scaling the file “on the fly” to suit the requesting computer. The result is a stream suited exactly to the download speed available, with virtually no wait involved to view the video.
Putting a Movie in a web Page
You can either link to a movie file or embed it in a web page. To create a link, simply use the standard anchor tag:
<a href="filename.mov">Movie file name</a>
The code for embedding a YouTube movie in a web page is a little more complex:
<object width=”425″ height=”344″><param name=”movie” value=”http://www.youtube.com/v/hhJOT7CHO94&hl=en&fs=1″></param><param name=”allowFullScreen” value=”true”></param><param name=”allowscriptaccess” value=”always”></param><embed src=”http://www.youtube.com/v/hhJOT7CHO94&hl=en&fs=1″ type=”application/x-shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”425″ height=”344″></embed></object>
Although this code is for a movie with the dimensions of 425 pixels wide and 344 pixels high. Users can use features on the player to view the video in full-screen mode.
Vimeo and other video sharing services offer similar embed codes.
NOTE: Some content management systems prohibit the <object> tag so you will have to link to the file on YouTube’s site.
Vimeo and other video sharing services offer similar embed codes.
Capturing a Frame for a Still Image
You can export any frame in an Adobe Premiere project to use as a still image:
- Place the Edit line in the Timeline window at the frame you want to export.
- Choose File > Export > Frame.
- Click Settings and choose the file type you prefer. To create a high quality file, choose TIFF. You can always turn the TIFF into a JPEG using a graphics editing application.
- Click Next. In the Video category, specify the frame size and color depth.
- Click OK to close the Export Frame Settings dialog box.
- Specify a location and filename, and then click Save.
Exporting a Streaming Movie
You can also use Premiere to generate streaming Quicktime, Windows Media and RealPlayer files, eliminating the need to run a file you export through a streaming encoding application:
- Choose File > Export > Adobe Media Encoder.
- Choose a location to save your file to and give it a name.
- Click the Settings dialog box to choose the streaming format and settings you want to use.
- Close the Settings window and hit Save. As mentioned, exporting can take a while, so you may want to do this at the end of the day or right before taking a break.
Putting a Streaming Movie in a web Page
To link to a streaming file, simply use the standard anchor HTML tag:
<a href="filename.rm">Media file name</a>
Embedding a streaming file in a web page isn’t done terribly often, and the code varies depending on what kind of streaming file you are using. Refer to the documentation that comes with your streaming server to implement embedded streaming code correctly.