What is HTTP Live Streaming?

HTTP Live Streaming (also known as HLS) is a protocol implemented by Apple for streaming of audio and/or video content over HTTP. HLS has become over the last years a de-facto standard for streaming content online. The main reasons for this are:

  • Adaptive streaming: HLS is able to dynamically adjust playback quality to match the device and network conditions such as the available speed of wired or wireless networks. This method of adaptive streaming allows the protocol to deliver better viewer experiences.
  • Support for live, video-on-demand (VOD) and time-shifted (DVR) streaming.
  • HTTP transactions: Because HLS only makes use of standard HTTP requests it is capable of traversing any firewall or proxy server that let through standard HTTP traffic. This also allows content to be delivered via widely available CDNs.

The HLS protocol also specifies a standard encryption mechanism with AES-128 for content protection, offers support for subtitles and closed captions, advertisements, ...

THEOplayer and HLS: HTML5 vs. Flash

HTTP Live Streaming is currently the only protocol capable of streaming to Apples iPhone and iPad devices. However, besides Safari on Mac, most other browsers do not directly support playback of the HLS protocol. Other solutions for playback of HLS require primarily the installation of external browser plug-ins such as Flash, Silverlight or QuickTime.

With THEOplayer it is possible to stream live, VOD or DVR content with HLS directly to HTML5 platforms without the need to have any plug-ins or apps installed. THEOplayer offers support for HLS on almost all modern devices and browsers. This includes desktop devices running Windows, Linux and OS X, but also mobile devices running Android or Windows Phone.

Supported platforms and browsers

THEOplayer offers support for HTTP Live Streaming on the following HTML5 platforms and browsers without the need to have any apps or plug-ins such as Flash, Silverlight or QuickTime installed:

Platform Browser
Windows Internet Explorer1
Edge
Chrome
Firefox
Opera
Vivaldi
OS X Safari
Chrome
Firefox2
Opera
Vivaldi
Linux Chrome
Firefox3
Opera
Android Chrome for Android
Firefox for Android
Opera
iOS Safari
Chrome for iOS
Opera Mini
Opera Coast
Windows Phone 8.1 Internet Explorer

THEOplayer supports HTTP Live Streams making use of transport stream media files. These can contain both audio and video, or a single audio or video track using the H.264 video codec and AAC audio. At this point there is solely support for self-initializing TS fragments. This means they start with a PMT/PAT definition and a full H.264 IDR frame. In order to guarantee the best experience, it is advised to provide the RESOLUTION and CODECS-attributes in the manifest for the different qualities.

Cross origin content

When playing content served from a different domain or origin standard HTML5 same-origin security policies apply. To overcome this, content has to be made available through CORS (Cross-Origin Resource Sharing).

Fallback streams and back-up servers

Streaming content is always risky, especially when live streaming big events to large audiences. It can always be a good idea to set up a back-up streaming server just in case your main server goes down. This increases your capabilities to deliver your stream to your clients and provide a good user experience for all.

When THEOplayer detects the main streaming server goes down, it will automatically check if a stream source is still available. This means that in case a backup server is present, the player will connect to it. This will result in smooth playback for the user, as if nothing even happened. Also, in case all of the streaming sources go down, THEOplayer will display a message informing the user and will automatically re-connect once one of the streaming sources become available again.

In order to configure back-up streams, you can add the renditions hosted on the backup servers to the HLS master playlist. An example listing streams available on a primary and back-up server can be found below:

#EXTM3U
#EXT-X-STREAM-INF:BANDWIDTH=611000,RESOLUTION=480x270,CODECS="avc1.42c00d,mp4a.40.2",NAME="270p"
https://primary.cdn.theoplayer.com/stream-400/index.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=611000,RESOLUTION=480x270,CODECS="avc1.42c00d,mp4a.40.2",NAME="270p Backup"
https://backup.cdn.theoplayer.com/stream-400/index.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=1024000,RESOLUTION=640x360,CODECS="avc1.42c00d,mp4a.40.2",NAME="360p"
https://primary.cdn.theoplayer.com/stream-800/index.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=1024000,RESOLUTION=640x360,CODECS="avc1.42c00d,mp4a.40.2",NAME="360p Backup"
https://backup.cdn.theoplayer.com/stream-800/index.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=1837000,RESOLUTION=960x540,CODECS="avc1.4d001e,mp4a.40.2",NAME="540p"
https://primary.cdn.theoplayer.com/stream-1600/index.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=1837000,RESOLUTION=960x540,CODECS="avc1.4d001e,mp4a.40.2",NAME="540p Backup"
https://backup.cdn.theoplayer.com/stream-1600/index.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=2291000,RESOLUTION=1280x720,CODECS="avc1.4d001e,mp4a.40.2",NAME="720p"
https://primary.cdn.theoplayer.com/stream-2000/index.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=2291000,RESOLUTION=1280x720,CODECS="avc1.4d001e,mp4a.40.2",NAME="720p Backup"
https://backup.cdn.theoplayer.com/stream-2000/index.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=3271000,RESOLUTION=1920x1080,CODECS="avc1.64001e,mp4a.40.2",NAME="1080p"
https://primary.cdn.theoplayer.com/stream-3000/index.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=3271000,RESOLUTION=1920x1080,CODECS="avc1.64001e,mp4a.40.2",NAME="1080p Backup"
https://backup.cdn.theoplayer.com/stream-3000/index.m3u8

In case all of your streaming sources go offline, THEOplayer will dispatch the offline-event and change itsonline-property to false. Once the stream becomes available again, the online-event will be dispatched and playback will continue. More information on these events and properties can be found in the THEOplayer JavaScript API.

Examples

This example shows THEOplayer playing an adaptive HLS manifest - adapting to the capabilities of your network, operating system and device.


1 Version 10+

2 As of Firefox 35 (announced release date January 13, 2015)

3 Requires gstreamer H.264 plug-in to be installed