Streaming Video On Your Website

This article is for businesses who want to stream video on their websites and cannot use free services like YouTube, Vimeo or Revver because their content is to be strictly commercial or promotional. It will give you, business owner (or web master working for business owner), a sense of the bandwidth and space costs associated with streaming video on your website as well as the technologies involved.

The Easy Way

First the easy way out. There are companies, most notably Vzaar and Brightcove, that take care of all of this for you. You pay a monthly subscription fee per a particular bandwidth cap. All you have to do is upload a video to their service and they handle converting the video to the appropriate formats and give you back a little HTML snippet to paste into your page. Both have an array of features to help you organize, deliver and track your videos. Vzaar starts at 5GB per month for $15 and goes up to 300GB for $300. Brightcove starts at $99 for 40GB.

Wait, What?

Of course, those numbers are meaningless without a sense of what the size of a video is. This depends on the length of the video and it's quality. The "bitrate" of a video the best measure of it's quality. Bitrate is the the amount of information in bits per second, higher bitrate means higher quality. However, thanks to the TV industry, when people talk about video quality they speak in terms of pixel resolution, as in, "HD" (High Definition). This measure alone is meaningless. I could have a "High Definition" video in terms of pixel resolution encoded at a low bitrate and it would look like a blocky awful mess. So, here is a list of common resolutions and the bitrates at which they are of acceptable quality:

Disclaimer: This is dramatically oversimplified. In reality 'acceptable' will depend on the content of the video - the biggest factor is the amount of movement. For example, a talking-head style program at 480p would look fine at 500kbits/s because each frame differs only slightly from the one before it, this is not so for a Micheal Bay trailer where each frame will be a completely new explosion. If you know what the content of your video is now you can use Adobe's helpful bitrate calculator to get a more refined idea.

That is all well and good, what does that translate to in terms of bandwidth?

How many hours of video do you get per those bandwidth caps?

And finally, how many times can a 10 minute video be viewed per month?

There you go, depending on the length and quality of your videos, along with the traffic you expect, this should give you an idea what it will cost.

But I don't want to pay that!

"But wait", I hear you saying, "I already have a 10/50/100GB per month hosting plan of which I am using barely any, can't I use that?". Yes, you probably can. For that I would refer you to Kaltura.org, specifically their Self-Hosted Video Platform. This preforms the video hosting, transcoding, playlist making and player code generating functionality that the paid services provide. Go check it out, I'll wait here.

Welcome Back

Now you could be thinking two things: A) "Wow, Kaltura is amazing, I will get right on that" or B) "Whoa, whoa, whoa - I'm not trying to establish a media empire here, can't I just do it myself?". If you answered B, yes you can, but consider yourself warned.

The Hard Way

There are three components you need be concerned with: the video container, codec and the player.

The video container is what people commonly think of as "video files", for instance "MP4", "MOV" or "WMV". This actually only describes the way the audio and video tracks are arranged in the file. The codec is the algorithm by which the audio or video is encoded. The world of codecs is highly complex both technically and legally. Codecs are extremely sophisticated algorithms that are usually subject to multiple patents and this makes licensing them messy and worrisome - more about this later.

The player is on the user end of things, it is the thing that is embedded in the webpage which is responsible for decoding the video. As such, different video players support different containers and codecs. Most likely, every video you've seen online has been a played through browser plugin; either Flash Media Player, Quicktime, Windows Media or Real - but probably Flash, YouTube uses Flash. However, this is changing. As part of the HTML5 specification a video element was proposed that would allow browsers to play videos natively. Also, because not all mobile devices (meaning Apple's) plan to support Flash, the momentum is in the direction of supporting video natively.

Now back to the messy part, for reasons having to do with patent law, not every browser is going to support every format. Suffice to say that if you want your video to work on all Windows, Mac, iPhone and Android devices, you will have to encode it three times (at least it's not four) and use two methods to embed it. I refer you to Mark Pilgrim's O'Reilly book on HTML5 as to the details. It fully describes the process of encoding videos in the appropriate format and what HTML markup to use to ensure that your video will work absolutely everywhere - it is also about 10 times as long as this has been.