Doing video using the HTML5 video element is difficult to implement. I gave up on it. However, there is a much easier way to show video in your website. Just have the video file itself open up in a new browser tab. Do not try to embed the video in an HTML file.
In June of 2012 I came across an article titled How to Use Dropbox to Host and Stream Videos; and, I decided to investigate this subject.
I could have made this post private in order to cover my behind — since I may repeat things from the original articles linked to herein. But, it’s more useful to me and others to make it public. Please check out the original articles; and, I hope their authors don’t mind.
- I’m into Dropbox.
- Dropbox is where I store all my stuff.
- A CDN is useful since web apps use databases for storage — and databases aren’t a good place to store media. Also, now that more people are using PAAS, one shouldn’t use the file system (where the apps code exists) for data storage either.
- I want to learn to put video on my webpages.
- Having a CDN will speed-up my web apps.
- Dropbox is a cost effective and robust CDN.
- Most web apps (i.e. WordPress) don’t export the media. So, It’s good to have the media files where they already get backed-up.
First I’ll see what Dropbox has to say about:
The closest Dropbox help page to this topic was: How can I get my movie to play on my phone or tablet? It seems H.264 (better) or MPEG-4 video is the standard. Video file extensions should be
.m4v. That later web article suggests some applications which transform video files to those formats. Although the article talks about these video formats as the standard for the iPhone and iPod actually — I believe these are also the standard formats for web streaming video.
As an example I’ll make a short video with my webcam or something and try to view it through the Dropbox website photo gallery.
I was able to make a video file using iMovie and my webcam. The file is called
clip-2012-07-01 20;56;11.mov. Now, it’s on my Desktop.
I don’t know exactly what video format it’s in. File info says: Kind: QuickTime movie, Size: 14.6 MB on disk, Dimensions: 640 × 480, Codecs: Photo – JPEG, Linear PCM, Duration: 00:22, Audio channels: 2, Total bit rate: 5,182, Encoding software: Mac OS X 10.7.4 (11E53)
Since I don’t know if this is a web video format I’ll do an experiment. I’ll put the video file as is into Dropbox and open it in the web interface.
That worked so apparently the file is in a format which can display on the internet.
However, I believe the file has no compression at all since it is 14.6 MB in size.
So, I opened the file in QuickTime Player; Then did File » Exported for Web… . What resulted was a bunch of new files in a folder called
~/Movies/clip-2012-07-01 20;56;11/ — although the source file was in
~/Dropbox/Photos/VideosForWeb/ . Among those files is a set of instructions — but more importantly there is a file optimized for the web called
clip-2012-07-01 20;56;11 - Wi-Fi.m4v . This file is smaller in size (compressed for the Web).
I’ll put a copy of the later compressed file in Dropbox — so I can test it as I’ve done with the original source file.
It tested good. Notably, the video pixel dimensions were smaller. File info says: Kind: Apple MPEG-4 movie, Size: 2.8 MB on disk, Dimensions: 480 × 360, Codecs: AAC, H.264, Color profile: SD (6-1-6), Duration: 00:22, Audio channels: 2, Total bit rate: 1,012
- …people started using Dropbox as a CDN for their WordPress servers.
- CSS files and other static content getting served through Dropbox will transfer an amiable Bandwidth from your own server to Dropbox servers.
- If the traffic to and from your website is more than 10 GB for CDN content per day, the best option would be to have your own CDN server or upgrade to Dropbox premium account.
- Dropbox services are cheaper than most others…The bandwidth limit for Dropbox paid account is 250GB per day…
How it’s done!
Blogger Greg Young writes:
I max my dimensions out at 1280 x 720 for HD content.
This is how Greg says it’s done:
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…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" /> </video>
I put the following HTML into my
index.php on both my production and development sites — but, it didn’t work. I get a video box which has the following message: No video with supported format and mime type found.
<video width="480" height="360" controls="controls"> <source src="https://www.dropbox.com/s/aicbj1789dw67q1/clip-2012-07-01%2020%3B56%3B11%20-%20Wi-Fi.m4v" type="video/x-m4v" /> </video>
Notice I’m using
type="video/x-m4v instead of
type="video/mp4 because I thought that would fix the problem.
I googled this problem — and, most of what I got was telling me that my web server needed to be configured to recognize the
.m4v extension as
video/x-m4v mime type. I know that my local machine has this already configured — So, that is not the problem. Others say it’s my browser; But, I tested my Firefox for HTML5 compatibility with the video tag and this codec; and, it worked on the test site; But, not my site.
If all else fails I’ll try to reverse engineer the example found at http://thehtml5herald.com/index.html
Confirm My Browser will Load it from My local server
I renamed the file
clip.m4v, put it in
~/Dropbox/Sites/web/ and loaded it into the browser using the URL
http://sameh-labibs-imac.local/web/clip.m4v . That works. So, this tells me:
- My Firefox browser supports the codec and video file type properly.
- My localhost http server communicated the file type properly to the browser and is not inherently part of the problem.
- The file name is not the problem.
Is the HTML5 video element the problem?
What should the HTML look like?
<video width="480" height="360" controls="controls"> <source src="clip.m4v" type="video/x-m4v" /> </video>
Let me borrow from the HTML5 Herald example and see if it works on my stuff.
Ok! Here’s the Deal
The video tag in Firefox only supports
.ogv files. That is the crux of the problem. Either
.mp4 will work in any particular browser with the video tag. The Chrome browser can run both.
Here is the code which worked (using the HTML5 Herald example in my index.php file)
<video width="373" height="280" poster="http://thehtml5herald.com/images/ford-plane-still.png" preload="preload" controls="controls"> <!-- MP4 must be first for iPad! --> <source src="http://thehtml5herald.com/media/ford-plane-takes-off.mp4" type="video/mp4" /><!-- Safari / iOS video --> <source src="http://thehtml5herald.com/media/ford-plane-takes-off.ogv" type="video/ogg" /><!-- Firefox / Opera / Chrome10 --> </video>
I’ll need to have two copies of each video file—one in each file format.