Special Report: The Truth About HTML5 & Mobile Streaming

Introduction

When it comes to HTML5 and what it means for video streaming, there is a lot of misinformation on the web. Most of the time, the issue is people don’t understand that HTML5 just defines a standard of how the web using HTML5 should work. It doesn’t specify specific implementations, at least not where streaming video is concerned.

The HTML5 standard provides backwards compatibility, encourages interoperability between implementations, and addresses web applications in a way previous versions did not.

Historically, web applications have relied on third-party plugins like Flash, and client-side scripting languages such as Javascript. Issues began to arise with third-party plugins because they were not compatible with every web browser, or even versions of the same web browser. They could also be finicky and frequently crash, ruining the user experience.

HTML5 addresses this problem by creating a standard that eliminates the need for plugins when rendering graphics and multimedia in a web browser. This turns out to be very important when it comes to mobile devices. While powerful, mobile devices have operating systems and applications that are necessarily limited to fit the smaller footprint. Add to that Apple’s refusal to support Flash on any of its mobile devices, and Adobe’s position to no longer support Flash on Android devices, and it means the market is ready for alternatives.

In this short report we’ll look at whether HTML5 is ready to be that alternative for the mobile video streaming market, and what you need to know about it in order to ensure your streaming video is viewable on as many platforms as possible.

How it works

HTML5, like HTML, consists of tags used to let browsers know how to create a web page when a user visits a particular URL. For multimedia, HTML5 offers a series of tags designed to embed content and allow direct playback without the use of plugins. In particular, the <video> and <audio> tags.

Figure 1 HTML5 Compatibility Table from MobileHTML5.org

These tags are included in the Multimedia category of the W3C API shown in the last row of Figure 1. This table lists all the major mobile OS browsers and their compatibility as of February 2013.

As you can see, only the Opera mini browser does not support the multimedia tags. Though it should be noted that because a browser is listed as supporting HTML5, doesn’t mean it supports every element or attribute.

Using these tags, though, does not give the browser the ability to playback the video. Just like today, playing video in a browser requires decoding it using the appropriate codec. Each browser still decides which video and audio file formats and codecs it will support. And which formats are supported is not included in the HTML5 standard. In fact, which codecs are supported turns out to be mostly dependent on legal issues of patents and royalties.1

So while HTML5 makes it easier to deliver video, it doesn’t alleviate the need to plan for compatibility across platforms – mostly. As we’ll see, there is a converging standard video format appearing.

Why it’s so hard  to make video work everywhere

Back in August 2012, Facebook’s VP of engineering Mike Schroepfer said that over 7,000 different devices access the service daily.2 Granted most people aren’t streaming video to a billion users like Facebook does.

But it is likely that your viewers will be using more than one type of mobile device. Each type of device could possibly have different operating systems and browsers.

And this is why it is so difficult to ensure your video will work on every mobile platform. Some devices, like the iPad or iPhone, do not let the user change the default browser (though they can install alternatives but all selected links will default to Safari). Other devices have browsers that simply pass video to the native player on the device rather than playing it in the browser. The number of possible configurations is mind blowing.

Another issue with mobile is that screen sizes vary dramatically. The iPhone 5 has a display of 100mm (diagonal). The Galaxy Tab 10.1 has a massive 256.54mm display. Is it possible to deliver video that will look good on both of these displays, and the numerous sizes in between?

Is it really that complicated?

If you’re getting discouraged that streaming video to mobile devices is just too hard, take heart. Browsers are evolving and many of those legal patent battles are being settled. Take a look at Figure 2, taken from The State of HTML4 Video report created by Longtail Video (creators of the JW Player).3 All the major browsers and their supported video and audio formats are listed.

Figure 2 Supported video and audio formats

Looking closely, you’ll see that the mobile browsers (iOS, Android, and WinPho 7.5) all support MP4 which usually uses the H.264 codec. This provides high quality video at a much lower bitrate than other formats. Opera Mobile 12.1, not shown on the chart, also supports MP4.

But before you run out and make all your videos MP4, you need to know that the H.264 codec is one of the most controversial because of the legal issues regarding the patents. Google has threatened for some time to remove support for H.264 from its Chrome browser (mobile and desktop). It has yet to do so, but it may still happen. Mozilla also just recently added support for the codec, though technically it isn’t the browser itself supporting the codec (it uses the operating system’s codec instead).

But for now, MP4 indeed seems to be a format that will be cross-platform compatible on the majority of mobile devices.

What if MP4, or HTML5, isn’t supported?

What should you do for those mobile viewers that don’t fall into the majority? HTML5 supports providing multiple file formats. If more than one format is listed as a source for the video, the browser will try each format in succession until one works. If none of the formats work, it is possible to display a message or image to let the user know the video will not work with their browser.

This of course means you need to upload your video in multiple formats. WebM with V8 codec, .ogg and the Theora codec are two alternatives that are generally compatible with some, but not all browsers. However, it not only takes time to create, convert, and upload the multiple formats, but it could also cost additional money depending on your streaming plan.

Alternatively, you can also insert a Flash embed object rather than a message. The user can click on the object and play the video using Flash. While Flash is technically no longer supported on major platforms, it will work on some devices. While the “death” of Flash has been touted for some time now, the truth is it is still widely used today. By the time it actually disappears, perhaps there will be a definitive video standard.

Meanwhile the best practices would be to determine the usage habits of your website visitors. What browsers are they using? What devices are they using when they visit? Knowing this information will allow you to make intelligent decisions on which and how many formats you need to support for your streaming videos.

Conclusion

While there isn’t a browser yet that supports HTML5 100 percent, the major ones are getting very close. The MP4 format with the H.264 codec is currently supported on all major mobile browsers. How long Google intends to support the H.264 codec is uncertain, though.

Other popular formats are WebM and .ogg. Since most streaming plans also charge for storage, it’s best practices to research your website visitors and see what devices and browsers they are using. This allows you to determine what formats best match your target audience and what investment you may need to make into creating multiple video formats.

Notes

  1. Burgess, Rick. “Mozilla Gives In, Adds H.264 Video Support to Firefox Nightly Builds.”Techspot. Techspot, Inc., 20 Feb. 2013. Web. 2 May 2013.
  2. Lawler, Ryan. “VP Mike Schroepfer: 7,000 Different Types of Mobile Devices Access Facebook Every Day.” Techcrunch. AOL, Inc., 3 Aug. 2012. Web. 29 Apr. 2013.
  3. Longtail Video. “The State of HTML5 Video.” Longtail Video. Longtail Ad Solutions, 10 Apr. 2013. Web. 29 Apr. 2013.

Sign Up For Free Account