HLS Adaptive Bitrate Streaming Example

  • Posted on Thursday, May 7, 2015

Find here our example of HLS Adaptive Bitrate Streaming and how to use it as an option with the S3Bubble WordPress Plugin.

Unnamed image (5)
Heads up! This video was brought to you by the awesome ommy-noms to check out more of his work please checkout his website. http://ommy-noms.com/


HTTP Live Streaming (also known as HLS) is an HTTP-based media streaming communications protocol implemented by Apple Inc. as part of their QuickTime, Safari, OS X, and iOS software. It works by breaking the overall stream into a sequence of small HTTP-based file downloads, each download loading one short chunk of an overall potentially unbounded transport stream. As the stream is played, the client may select from a number of different alternate streams containing the same material encoded at a variety of data rates, allowing the streaming session to adapt to the available data rate. At the start of the streaming session, it downloads an extended M3U playlist containing the metadata for the various sub-streams which are available.


HLS Streaming is a technique that http://www.netflix.com/ use to stream their videos, you may have notice that sometimes your picture may pixelate for a moment and then return to HD quality.  This is Multi Bitrate Adaptive Streaming magic it will serve a lower bitrate stream based on the quality of internet connection.

HLS streaming is great because it puts an end to the really annoying spinning buffer wheel so your users can still watch videos no matter how bad their internet connection is.


The great thing about HLS streaming is if you encode your video into 10 second segments, if someone really wants to get your video stream they would have to get each individual segment for the entire movie.  This time consuming process and having to patch the video together after should hopefully deter those media thieves out there.

Encoding & Transcoding

We use the awesome Amazon Elastic Encoder to encode our videos into ten second segments here is a quick intro tutorial that will help for anyone just starting out Watch Tutorial.


All the Media Players within the S3Bubble WordPress Plugin are setup to work responsively and re size perfectly for any device, give it a go.

Browser & Device Support

Chrome Firefox IE Safari Android iOS Windows Cloudfront Delivery
HLS Streaming
uses mediaelementjs
.ts .m3u8 playlist
uses flash player
uses flash player
uses flash player
uses flash player
Fallback Optionuses mp4 progressive fallback Supported
uses native player
Fallback Optionuses mp4 progressive fallback Supported
but not essential and streaming directly from Signed Amazon S3 Urls


As always here at S3Bubble we always appreciate feedback from our community so if you find that S3Bubble does not work for you on a certain device with a certain setup please let us know at support@s3bubble.com and we can look into finding a fix.