Supercharge HTML5 Video With Rackspace Cloud Files

This post explores embedding a Rackspace Cloud Files-hosted video using the new HTML5 standard, like this:


In a prior post, I detailed the HTML5 audio standard, which is useful for embedding songs and podcasts directly into websites. Today we take the HTML5 standard a step further by showing its use in embedding videos. The ease of implementation, sleek professionalism and cross-browser compatibility makes HTML5 the modern alternative to Flash-based videos. By hosting videos yourself, you can avoid ads, third-party branding and size limitations.

The huge size of video files makes them cumbersome to stream, and no user likes to wait as their video lags during playback. Fortunately, Rackspace Cloud Files runs on technology designed for one purpose: stable and speedy delivery of large media like videos. Here, we explore supercharging HTML5 videos with Rackspace Cloud Files.

HTML5 Video

Historically, video has been embedded using Flash, and most hosting has been on large social sharing sites like YouTube and Vimeo. Relative to Flash, HTML5 video requires few lines of code. In addition, modern browsers natively support HTML5, whereas Flash normally requires a plugin. This extends to smartphones and tablets, where HTML5 videos play without any tweaking, yet Flash is rarely supported at all. (Try it – play the videos on this page on your smartphone and tablet!)

Note, though, that HTML5 video does not provide content protection – users may download the source video files without hindrance, whereas websites like YouTube use Flash because it prevents end users from being able to easily download the source video. Keep this in mind if you are hosting copyrighted content.

The Rackspace Cloud Files Advantage

Video files are huge. In fact, video consumes about half of all bandwidth in the US, according to Ars Technica. Traditional file servers do not handle the requirements of video well because of the high bandwidth and large file sizes. Worse, when a site is under load, video can hog so much of the server resources that the main website slows to a halt.

It was for this reason that content delivery networks (CDNs) came to prominence. Every day, large corporations use distributed global networks to silently deliver your videos, applications and songs. The Akamai-powered Rackspace Cloud Files network makes this technology accessible for businesses of any size, and flat bandwidth-based pricing makes it affordable.

The advantage comes with the scalability of Rackspace Cloud Files – it copies your video files to servers around the world, and whether you serve dozens or thousands of users, the network’s technology silently scales to keep quick load times.


Preparing The Files

As with HTML5 audio, while the HTML5 video standard is made to work easily, unfortunately no single video format is supported across all web browsers. As this Wikipedia table shows, there are three main formats used on the web. The reason for multiple formats is that the incumbent H.264 codec is covered by a patent, and some wish to use only open-source codecs to avoid licensing issues.

From a practical standpoint, the supported codecs by each browser continue to change, so for stability and long-term compatibility, it is best to provide a video in all three formats – H.264, Ogg Theora and WebM. In addition, note that the patents covering the H.264 codec allow free use of the format only when videos are available for free to the end user (source). If you intend to charge for access to videos, I advise conducting your own due diligence on licensing.

For this example, I am using a video of my dog chasing snowballs:

The main difficulty for me was converting the videos to the necessary formats. Even with a professional video editing suite, I had difficulty. I found that the easiest way on Mac computers to convert videos was with the Miro Video Converter, which is available for free in the Mac App Store. Alternatives for Windows and Linux are also available.

Uploading To Rackspace Cloud Files

On the Rackspace Cloud Control Panel, first choose an existing container or create a new container to host your content. Upload the three video files and publish them in the container. Click the sprocket next to each file and then select “View All Links.” Copy the HTTP links for the video files.

Alternatively, the open-source and free Cyberduck software, which is available for both Mac and Windows, makes it easier to upload multiple files. If you manage Rackspace file containers often, Cyberduck makes it quicker to manage these files.


The basic HTML5 video player above uses this code:

<video width="356" height="200" controls poster=""  >
<source src="" type="video/mp4" />
<source src="" type="video/ogg" />
<source src="" type="video/webm" />
<em>Sorry, your browser doesn't support HTML5 video.</em>

You may copy the code into your website, replacing the file links with your own Rackspace Cloud Files URLs. Also, note that the file names are case sensitive!

Let’s walk through the various parts of the code and explain what they do:

  • <video>: The video tag initializes the HTML5 video player.
    • Controls in the opening tag tells the browser to show controls (like play, pause and full screen) for the video.
    • The poster attribute controls which picture to show when the video is not playing. If you do not specify a poster, the browser will show a frame from the video. The poster is optional, but adds a degree of professionalism, and allows you to show a logo or title before the user clicks “play.” Using Rackspace Cloud Files to host the photo will provide a speed increase, but you may wish to use a native media browser (such as that in WordPress) instead to host the video.
    • Width and height control the dimensions of the video player, in pixels. This does not have to match the video file precisely, but it should match the dimensions of the poster image in order for it to display correctly.

In the opening tag, other useful attributes include:

    • Autoplay: Plays the video as soon as the page loads.
    • Preload: Begins loading the video file as soon as the page loads, rather than when the play button is clicked. This means that the page loads more slowly, but the file is immediately available when the user is ready to play it.
    • Loop: Continuously replays the video file until it is paused.
    • Muted: Disables audio during playback.
  • <source>: These lines declare different source files and their formats. If there is only one format and source video, it may be declared with a src in the opening video tag. Due to compatibility reasons, the src attribute is rarely used in the opening tag.
  • Incompatibility: The text between the video tags is displayed only if the browser does not support HTML5. Here, I display a simple message that the browser is incompatible. To see what it looks like, try using Browser Shots on this page or your website, it can show you how an older website displays HTML5 audio content. It is possible to embed JavaScript or Flash between the video tags as a fall-back player for older browsers.


If you have any questions, please post them in the comment section below. Other good HTML5 Video resources include:

For more information on high performance media that’s fast, simple and reliable, be sure to check out the new Rackspace Media Hosting on the Cloud website at:

Rack Blogger is our catchall blog byline, subbed in when a Racker author moves on, or used when we publish a guest post. You can email Rack Blogger at


  1. Thanks for this. One thing I’d like to know – does the combination of HTML5/CloudFiles enable partial streaming of content or does the client still have to download the entire file progressively even if they seek 50% of the way into the video for example?

    • This implementation isn’t optimized for partial streaming, but when you use the Open Cloud interface, there is a streaming option that does support this. For this type of support, check out the javascript libraries at the end of the post.

  2. In the past when you would access a video file via the streaming URI it would server the file with a content type of video/x-flv no matter what the file was. Even if you manually set the content type to something different. This would cause the html video tag to fail because it does not support flv files. Has that been correct for the streaming URI?

    PS. With the release of Firefox 20 the mp4 file format is now supported on windows systems by leveraging windows media foundation (removes the legal burden from FF) That means that IE, Chrome, Safari, and FF will have mp4 support!!

  3. I agree with Fernanado, really too bad that this solution doesn’t work on mobile (or at least iOS). Was hoping to use it for a site on which we will have both large volume and a number of videos.

    Any word on a way to reliably stream to iOS as well with just one link?


  4. Streaming from the Cloud Files CDN works great!! If I use the tag in HTML5 the streaming works great. But I don’t seem to have much control on getting notifications when the video finished playing. I would like to have control over that. So I tried using the MPVideoPlayerController class and gave it the ios streaming http URL. But it doesn’t work. Am I doing something wrong or is it actually not supported or not supposed to work unless using the tag?

  5. I am new to Streaming from the Cloud Files CDN, I have uploaded mp4 videos from cyberduck. in HTML5 video player we need 3 types of source video file .mp4,.webm, .ogv, my question is: how I can get the ogv and webm files? Do I have to upload these files like mp4 video?

  6. I am new to Streaming from the Cloud Files CDN, I have uploaded mp4 videos from cyberduck. in HTML5 video player we need 3 types of source video file .mp4,.webm, .ogv, my question is: how I can get the ogv and webm files? Do I have to upload these files like mp4 video?

  7. you mention videojs, but apparently videojs does not support the streaming link, and Akamai only supports flow player and jw player, there is any way to support streaming with video js?

    Another question, what is the difference between the http and streaming link for the CDN files? are both streaming?


  8. This design is wicked! You most certainly know how to keep a reader entertained.
    Between your wit and your videos, I was almost moved to start my own blog (well, almost…HaHa!) Excellent job.
    I really loved what you had to say, and more than that, how you presented it.
    Too cool!


Please enter your comment!
Please enter your name here