Supercharge HTML5 Video With Rackspace Cloud Files

Filed in Product & Development by Philip Thomas | February 7, 2013 3:30 pm

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

Background

In a prior post, I detailed the HTML5 audio standard[1], 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[2] 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[3] and Vimeo[4]. 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[5]. 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[6] (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.

Implementation

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,[7] 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[8]). 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[12], 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[13], 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[14] 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.

Embedding


The basic HTML5 video player above uses this code:

<video width="356" height="200" controls poster="http://0639ac876cdeb83a534d-95c931daa7c80b903aae4215b472f9f8.r4.cf1.rackcdn.com/Snowball.png"  >
<source src="http://0639ac876cdeb83a534d-95c931daa7c80b903aae4215b472f9f8.r4.cf1.rackcdn.com/Snowball.mp4" type="video/mp4" />
<source src="http://0639ac876cdeb83a534d-95c931daa7c80b903aae4215b472f9f8.r4.cf1.rackcdn.com/Snowball.ogv" type="video/ogg" />
<source src="http://0639ac876cdeb83a534d-95c931daa7c80b903aae4215b472f9f8.r4.cf1.rackcdn.com/Snowball.mp4" type="video/webm" />
<em>Sorry, your browser doesn't support HTML5 video.</em>
</video>

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:

In the opening tag, other useful attributes include:

Conclusion

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: http://www.rackspace.com/cloud/media/[18].

Endnotes:
  1. I detailed the HTML5 audio standard: http://www.rackspace.com/blog/scaling-html5-audio-with-rackspace-cloud-files/
  2. Rackspace Cloud Files: http://www.rackspace.com/cloud/files/
  3. YouTube: http://youtube.com
  4. Vimeo: http://vimeo.com
  5. Ars Technica: http://arstechnica.com/business/2012/05/bandwidth-explosion-as-internet-use-soars-can-bottlenecks-be-averted/
  6. content delivery networks: http://en.wikipedia.org/wiki/Content_delivery_network
  7. As this Wikipedia table shows,: http://en.wikipedia.org/wiki/HTML5_video#Browser_support
  8. source: http://en.wikipedia.org/wiki/H.264/MPEG-4_AVC#Patent_licensing
  9. Snowball.mp4: http://0639ac876cdeb83a534d-95c931daa7c80b903aae4215b472f9f8.r4.cf1.rackcdn.com/Snowball.mp4
  10. Snowball.ogv: http://0639ac876cdeb83a534d-95c931daa7c80b903aae4215b472f9f8.r4.cf1.rackcdn.com/Snowball.ogv
  11. Snowball.webm: http://0639ac876cdeb83a534d-95c931daa7c80b903aae4215b472f9f8.r4.cf1.rackcdn.com/Snowball.webm
  12. Miro Video Converter: https://itunes.apple.com/us/app/miro-video-converter-mvc/id412699210?mt=12
  13. Rackspace Cloud Control Panel: https://mycloud.rackspace.com/
  14. Cyberduck: http://cyberduck.ch/
  15. Browser Shots: http://browsershots.org
  16. HTML5 Video (Wikipedia): http://en.wikipedia.org/wiki/HTML5_video
  17. Video.js Open-Source Project: http://videojs.com/
  18. http://www.rackspace.com/cloud/media/: http://www.rackspace.com/cloud/media/

Source URL: http://www.rackspace.com/blog/supercharge-html5-video-with-rackspace-cloud-files/