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.
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="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:
- <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.
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/.