I’ll show you how to deliver high-definition movies from your web pages. This solution boasts high video quality, smooth playback and low-cost.
When we introduce something new, we write about it and we also like to show it in action. There’s nothing better than a short demo movie to explain how things work.
For example, last week we added a new major feature to our system (a translation glossary). To use it properly, translators need to see exactly where to click and what to expect.
So, I wrote a short blog post about it, included a 3 minutes video and we’re all set. About 1000 translators viewed it and a week later, they’re all using the glossary correctly. I’m happy.
Our setup for web videos
It’s a bit of a long chain, so here goes:
- Produce the video: I’ve use both Instant Demo, Jing and Camtasia Studio.
- Upload to Amazon S3 and make it available for all to read.
- Create web access via Amazon CouldFront for that S3 bucket.
- Install a Flash movie player on your server. We use JW Player.
- Embed videos in your site.
And now, the full details…
1. Producing videos
No matter what you use, at the end you need to have a movie file to play. The best is to get an FLV or MP4 file. Inside, they’re pretty similar.
There are a few programs that can help you produce videos. Eventually, we settled on Camtasia Studio. Editing is very convenient and it makes it easy to record a sound track and then add video. If your own voice is good enough (so that you don’t need to get professional narration), Instant Demo will be an excellent option as well.
When you’re done producing the video, get an FLV or MP4 file.
2. Serving videos from Amazon
Amazon S3 quietly became a leading option for remote storage. Their CloudFront system also makes them an excellent choice for a simple Content Delivery Network (CDN).
If you’re not familiar with the terminology (just like I was 3 weeks ago), a CDN is a network of servers, placed in different locations, who can deliver the same contents.
The idea is to deliver large files from a server that’s closest to the client. Pretty simple to explain, but requires serious infrastructure. Apparently, Amazon’s solution is very good.
To get started, you will need to create an account for both Amazon S3 and CloudFront. Head over to Amazon Web Services home page where you can read more about all their services.
2.1. Storing files in Amazon S3
You will need some sort of interface program to store files on Amazon S3. I use the Firefox extension S3 Fox. It’s like a tiny FTP program that allows you to create buckets (S3 top-level directories), store files and read them.
- Log in to your AWS account.
- Create a new directory (will create an S3 bucket).
- Go to that directory.
- Upload the file.
- Select the file and click on the Edit ACL button.
- Make it readable by all.
3. Enabling CloudFront access to your S3 files
Now that the files are in S3, you need to add the CloudFront access.
Go to your AWS account and click on the CloudFront tab. Then, click on Create distribution.
You can choose between Download and Streaming.
Download means your files will be served like regular HTTP downloads (like files that you download normally to your browser).
Streaming means files will be sent in small chunks to the client. The advantages in streaming distribution is that clients can quickly skip ahead. Downloaded files need to be read from start to stop.
The Flash display component can read just fine using both delivery methods. I’ve seen a dramatic speed difference between the two. The Download delivery worked way faster than the Streaming delivery. It could be a result of other factors, but we’re using only Download at the moment.
The CNAME is an optional field. It will allow accessing the files from a name in your domain. We don’t use it, as nobody needs direct access to downloading our videos.
Before you continue, test it. Open a browser, point it to the distribution you’ve just created and the file that you uploaded. Your browser should download/play the video.
Note: the CouldFront distribution that you create is for an entire Bucket (top-level directory). It will allow serving all the files that you upload to it.
4. Installing a Flash player
A Flash player is the piece of code that sits between the files (in Amazon) and the browser.
It’s a Flash program, so it runs on the visitor’s browser. It reads the movie from the web, adds playback controls and displays the movie on the screen.
We use JW Player. It’s a simple and lightweight player and also includes tons of plugins, which we still haven’t started exploring. For basic video playback, you just need the player and nothing more.
- Download the player.
- Unzip it on your web server.
- Run the sample clip and see that everything works.
Now, you have your own Flash player and you can play any movie in your site (not just the demo that came with the player).
5. Embed videos in your site
JW player comes with a handy setup wizard that will allow you to create the HTML code for your own movies.
You’ll get a piece of HTML that you can just copy/paste to your site.
I preferred to edit the HTML code directly, without using the wizard. After two rounds, it works faster for me than going through the web wizard just for changing a couple of parameters.
Here is a sample HTML code for our own video (that Glossary how-to):
Note: this script assumes an ID with a name. If you’re embedding more than one video on the same page, you’ll need to use the HTML code directly and not this cool JS.
And you’re good to go!
Here is this code running live: