Support: 1-800-961-4454
1-800-961-2888

Supercharge HTML5 Video With Rackspace Cloud Files

6

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, 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.

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, 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.

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:

  • <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.

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/.

About the Author

This is a post written and contributed by Philip Thomas.

Philip Thomas graduates this spring from Washington University in St. Louis, where he majors in Systems Engineering and Physics. He serves as an Associate at Cultivation Capital. In his free time, he performs on the WUSauce salsa dance team, and runs a venture capital lecture series of the Washington University Tech Entrepreneurs.


More
  • Simon

    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?

    • http://www.philipithomas.com Philip I. Thomas

      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.

  • http://www.originpc.com Fernando

    The streaming link does not work for iOS…its counter productive to have two separate links for desktops and mobile.

  • Justin

    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!!

  • Evan McDaniel

    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?

    Thanks.

  • Tariq

    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?

Racker Powered
©2014 Rackspace, US Inc.