How to stream your videos stored in your DropBox to your blog

With the not-so-sudden disappearance of SL Porn Tube, I decided to take a look at something I have been wanting to do for quite long: store my little videos in my DropBox and embed these on my blog. Since I've only been doing little clips lately, I didn't really feel like uploading them to XTube, and even on Naughty Machinima, they look a bit out of place. So DropBox seemed to be a nice solution… if it works.
So good news: it does work! It's not exactly easy and has its drawbacks, but I managed to do it. Here is how.
First, I uploaded my videos to DropBox. That's pretty easy, you probably know how to do that  if you have a DropBox account. If you don't, you have all the required documentation when you sign up for DropBox.
Second, I created a sharing link for the videos I wanted to embed. This is quite easy too: you just have to go on the DropBox website, log in with your account information, browse your files to your video and open it. You'll get a window like this:

Now you just have to click on the link sign indicated by the red arrow on my screenshot to create a sharing link for the video. This will create the link immediately and open a new page with a little dialog:

Here, you can send the link by email, or share it on Facebook or Twittr, but this is not what we're after: what we need is the 'Get link' button. This will copy the address for the link in your clipboard.
Third, I edited my blog post to embed the video in it. This is the tricky part: you have to display the raw code for your post and give up on the nice word-processor like interface. On Blogspot, this is done by clicking the 'HTML' button at the top left corner of the page when you're editing your post.
Once you have the raw code displayed, spot the place where you want to put your video (I often use a silly marker like XXX in the normal interface to find the right spot), and then you insert this:

<video width="WWW" height="HHH" controls="controls">
<source src="XXX" type="video/mp4" />
</video>

where WWW is the width for the video you want in your blog post, HHH is its height (try to keep the aspect ratio from your videohere), and XXX is the text for the link you got in DropBox, but modified a bit. The DropBox link will look like:
https://www.dropbox.com/s/o9kqxokew3cana6/Beach%20showing%20off.mp4 
You have to replace the 'https://www.dropbox.com' part by 'https://dl.dropboxusercontent.com'. So the address above would be transformed in:
https://dl.dropboxusercontent.com/s/o9kqxokew3cana6/Beach%20showing%20off.mp4
Just for information, it is not a hack: it is actually advised by DropBox itself (see here).
So since I wanted my video to be 640 points wide in my blog post, and that it had a 16:9 aspect ratio, its height should be 640 x 9 / 16 = 360 (math, waaaaaaa! *grins*), so the code to insert in my blog post is:

<video width="640" height="360" controls="controls">
<source src="https://dl.dropboxusercontent.com/s/o9kqxokew3cana6/Beach%20showing%20off.mp4" type="video/mp4" />
</video>

And voilà, it works, the video is embedded in my blog post, woohoo!
Except it doesn't work… Uh? Well, OK, it does, but not everywhere… On my usual browser - namely Firefox -, I had the surprise to see a big grey rectangle in my blog post with a message saying 'No video with supported format and MIME type found." Darn… WTF? After searching a bit, I found out that all video formats do not work on all browsers using this method. The video was correctly displayed in Safari, but didn't work in Firefox… It seems that most commercial browsers (IE, Safari) support correctly the MP4 format, but it isn't supported in open-source browsers like Firefox or Chrome, that prefer OGV or WebM…
So what to do here? Well, there a simple solution: reencode your video in another format, for example WebM, upload the new video to DropBox, do the same as above to create a sharing link for it and put a new line in the <video>…</video> piece of code in your blog post. Here is how it actually looks for my video:

<video controls="controls" height="360" width="640">
<source src="http://dl.dropboxusercontent.com/s/o9kqxokew3cana6/Beach%20showing%20off.mp4" type="video/mp4"></source>
<source src="http://dl.dropboxusercontent.com/s/mer42krv3glsq1m/Beach%20showing%20off.webmhd.webm" type="video/webm"></source>
</video>

Two lines for the source: the first one for browsers supporting MP4, the second one for the others that only support WebM.
And this time, it does seem to work everywhere, woohoo! You can see the results here or here. Pretty neat, uh? *smiles*

So of course, streaming your videos from DropBox has its drawbacks:

• The size of videos is not limited, but the total available space is: 2 GB by default, you can raise it to 5 GB by inviting people I think, but for more, you'll have to pay…
• As explained above, you have to put two copies of your videos in your DropBox to make sure most people can see it. So it'll eat up more space than necessary from the already limited available one.
• Even when putting both formats, it might not work for some people with older browsers. You might want to put a link to your DropBox page for the video here (the one for the shared link, which is the only one which is public).
• I've read somewhere that if you get too much traffic on a shared link, DropBox might decide to remove it. I'm not sure it's true, I didn't find anything about this in the DropBox terms of use, but it would be understandable, since it increases the load on their servers I guess…

All in all, for my little things, I think I'll stick to this solution. If I ever do a 'full featured' film again, I'll probably go for the XTube and/or Naughty Machinima solution, but for now it'll be enough.

And here are my sources for all this:

• A post on Mr Wideen's classroom blog explaining the embedding process.
• An introduction to the <video> HTML tag on the alsacréations website (in french).
• And finally a link to a pretty neat reencoding application called Miro Video Converter. I used it to convert my videos from MP4 to WebM, and it worked really nicely!