How to Use Dropbox to Host and Stream Videos

How to Use Dropbox to Host and Stream VideosGuest 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" />
</video>

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: https://www.dropbox.com/s/os60r63ogwfl408/your_video_here.mp4.

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" />
</video>

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.

Article Written by

Guest Blogger is from all sorts of different times and places. Guest Blogger is usually less mysterious than James Bond, but often more mysterious than Austin Powers. Guest Blogger has a knowledge base that is as vast as space, and as timeless as infinity. Guest Blogger is sometimes me, and Guest Blogger is sometimes you.

  • http://twitter.com/SkinnyBill William Meade

    Yes, it’s important to remember the traffic limit, especially when streaming video to multiple people. A friend put a 1hour+ video in dropbox and sent it to 3 people. The next day he got an email saying his account is suspended for causing too much traffic.

  • Rodrigo

    Hi, is there a way to do this with audio files? Thanks

  • rich

    nice. U are awesome

  • Jon

    Is there any way to get a “preview” shot? It just shows up as a blank box with the video controls below

  • Schnell

    embedded video streaming isn’t supported any longer by dropbox

  • Broken link :(

    Your link for the “great resources” is a 404 link btw.

  • Mark

    Damn, I read the article in its entirety… then reading the comments, noticed streaming video isn’t supported any more.

    Is that right?

    And that chart to help figure out the best size to ensure maximum size compatibility goes to a 404 as mentioned in another post as well.

    Perhaps it may be time to edit this Guest Blogger article

  • SumoS

    For Drobox url video not playing, Says “Error: Unsupported video type or invalid file path”

  • Nathan McLain

    I was getting the video not supported message then noticed my CMS was closing the tag before the open tag, so it was all wonky. I changed it to this format and it worked like a charm:

  • http://www.tristankirkpatrick.com Tristan Kirkpatrick

    Is this now a no-go due to the dropbox changes? Or does this still work?