Guest blogger Greg Young writes:
Dropbox has become synonymous with online file sharing. It is platform agnostic and, with its desktop tools, dragging-and-dropping a file is as simple as… well, dragging and dropping it.
What’s not as commonly known is that Dropbox can be used as a content delivery network (CDN). Actually, Web developers have known about this for some time now, using Dropbox to host a certain amount of a site’s content to improve the load performance you would commonly expect from a CDN. As a result, Dropbox had to change its policies to essentially meter the content, especially from free accounts.
What’s even less known is that you can stream video files from your Dropbox account; using HTML5 video tags, you can even embed them on your site. This is a great alternative from uploading them to video sharing sites. You get the benefits of hosting your own content, but without the burden of storage, bandwidth, or poor performance from your own server.
So let me take you on a step-by-step journey of how to use Dropbox as a low-cost video CDN. I’m going to assume you already have Dropbox and that you’ve even been using it to store and transfer files. If you haven’t, first, sign up for an account, then read about how to get started with Dropbox. I’m also going to assume that you know your way around how to encode videos in preparation for Web delivery.
Encode Your Video
You want to start by encoding your video. Since Dropbox is essentially using HTML5 to stream your video, we want to create a file that’s compatible with HTML5. I prefer using H.264; it has the best compression to quality ratio. If you have the file archived in a format like Final Cut Pro’s ProRes, you can use MPEG Streamclip to transcode the file to H.264.
I max my dimensions out at 1280 x 720 for HD content. You can go higher, but that will increase your file size.
If you stream through Dropbox, it will place it into a sized container on its page or, if you embed, you can use any dimensions you choose. The benefit to starting large is if the viewer goes full screen, the video will retain its quality. More on that later.
Once your encoding is complete, place the file into your Dropbox folder. If you haven’t already installed the Dropbox app on your computer, do so now. This allows you to map directly to your Dropbox folders from your desktop. Now you can drag-and-drop files from one location to another with ease. I haven’t done any benchmarking on this, but it seems like file uploads through the app are much faster than through the Web uploader. I uploaded a 100 MB file in a matter of seconds.
Stream from Dropbox
There are two ways to display your content using Dropbox: through a Dropbox webpage, or by embedding the video on your site. The first is the easiest and requires no special encoding skills.
To display on a Dropbox webpage, you do the following: Open your Dropbox folder on your desktop and navigate to your video. Right click on the video and you should see a Dropbox drop-down list. Next, click on Get Link.
This should launch your browser and take you to the webpage. You can now grab that link and send it out. Whoever has that link will see this page and be able to view your video. There is even an option to download the video.
Embed from Dropbox
The second option requires at least a basic understanding of how HTML embed codes work. It’s not complicated, so don’t be scared off, but it’s also not copy and pasting an embed code from YouTube. You’re essentially creating your own embed code.
You start with the following HTML5 code as a template:
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
Now, follow the steps above on getting the link to the video. Then, where you see “movie.mp4,” you’ll want to replace this with that link. For example:
Next, you’ll want to adjust your width & height. You’ll want to use dimensions that best fit within your site. I use this handy little chart to help me figure out the best size to ensure maximum size compatibility.
When you’re all done, your embed code should look something like this:
<video width="512" height="288" controls="controls">
<source src="https://www.dropbox.com/s/os60r63ogwfl408/your_video_here.mp4" type="video/mp4" />
Now just post this code on your site and you’re good to go. If you wanted to play around with some different features for the embed player, here is a great resource for the different coding options.
And that is how you can use Dropbox as a low-cost video CDN. Do keep in mind that Dropbox does have bandwidth limits, so if you have popular content, you could hit that ceiling very quickly.