Video Streaming in HTML5 Video Tag

HTML5 has entered the online video market space with widely cited acceptance. The market data from StatCounter, a web analytics firm indicates that over 80% (combining mobile and desktop as a single entity) of the market now supports HTML5 video.

With evolving HTML5 video specification and its growing implementation by various browser vendors, it is important to understand the capabilities provided by this technology in video streaming.

As of now, browser implementation of HTML5 video tag only supports loading of the video using HTTP or HTTPS protocols. Below are the available HTTP based streaming methodologies which work with HTML5 video tag.

HTTP Progressive Streaming

HTTP Progressive streaming also known as progressive downloading means receiving an ordinary file over HTTP and starting to process it before it gets completely downloaded. In fact the video is delivered in the same manner as an image or any other file on a web site. The real difference lies in the fact that the browser will begin to show the video while it is downloading.

The source of the video tag will contain a url like “http://www.example.com/video/video-file.mp4”.

When a video is delivered over HTTP, it is actually downloaded on the end users computer. The good part about this is, if a person watches the video again then the browser will be able to load the video from the cache. However, it makes it easier for someone to steal your content as even if you pause the video the browser will continue to download the whole file.

‘Psuedo’ or ‘Seek streaming’ is a technology which uses TCP/IP range requests to allow the user to jump to any portion of the video as the browser will make a range-request of the file to download that portion. As of now, every HTML5 browser already supports seeking to not-yet-downloaded portions of the video by using HTTP 1.1 range requests.

All HTML5 compliant web browsers support HTTP progressive streaming and all web servers are capable of progressive download.

HTTP Live Streaming (HLS)

HTTP Live streaming is an adaptive streaming communications protocol created by Apple which enables sending video over HTTP from an ordinary web server for playback on iOS based devices including iPhone, iPad, iPod touch, Apple TV, and on desktop computers Mac OS X.

HLS can distribute both live and on-demand files and is the sole technology available for adaptively streaming to Apple devices.

It works by breaking the overall stream into a sequence of small HTTP-based file downloads and supports multiple alternate streams at different bit rates. At the beginning of the streaming session, it downloads an M3U file containing the metadata for the available streams. As the stream is played client can select an alternate stream containing the same content encoded at a variety of data rates based on the available data rate.

The good part unlike HTTP Progressive streaming is that, users will not be able to download the video content locally on their machine using the video URL.

On the mobile front, apart from the iOS devices, HLS is also supported by Android devices from version 3.0+

Below is a table depicting which browser/device supports HTTP Progressive Streaming and HLS

Road Ahead

Even though streaming in HTML5 video tag is in its early stage, many browser vendors have mulled the initiative to support it’s streaming. The Media Source Extension and Encrypted Media Extension are brand-new APIs for building adaptive streaming players with HTML5 video tag. Currently Chrome and IE11 on Win 8.1 supports them while other browser vendors are working on it.