In this blog post, we will setup Amazon Cloudfront to swiftly and reliably deliver an HLS stream around the globe. We’ll use JW Player to embed these streams, so they work on both iOS and desktop browsers.
This post is a follow-up to the one on Encoding HLS with Amazon Elastic transcoder. That post discussed setting up storage buckets and creating Pipelines, Presets and Jobs to encode HLS.
Creating CloudFront distributions
By the end of the previous post, we ended up with an HLS stream and a thumbnail in separate Amazon S3 buckets. In order to improve delivery performance, we’ll now setup CloudFront to deliver these files over HTTP.
This tutorial assumes that you have already signed up for Amazon CloudFront and can access these services from your AWS console. In the console, open the CloudFront section.
Inside the CloudFront console, create a new distribution. Set the Delivery Method to Download. In step 2, set the Origin Domain Name to the S3 bucket that contains your HLS stream. Leave everything else default and create the distribution:
Repeat these steps to create a second distribution for your thumbnail image S3 bucket.
Uploading crossdomain XML files
At this point, your HLS stream and JPG thumbnail are available through the two new CloudFront domains.
In theory, all is set for delivering this stream across the world. Before we can load this stream into JW Player though, one more item needs to be taken care off: Flash cross-domain loading.
In short, the problem is that a Flash player from domain A can only load an HLS stream (or smooth an image) from domain B if that domain has an XML access file in its root. This XML access file looks like the following:
You must create and upload this crossdomain.xml file to your HLS stream and JPG thumbnail buckets. This can be done in the S3 console.
Setting up JW Player with HLS
With the Crossdomain files installed, all is ready to setup JW Player. Supporting HLS in Flash, JW is the only player that can play HLS streams across desktops and mobile devices. You do need the Premium Edition of JW Player for this functionality though.
When you’re subscribed to the premium edition of JW Player, go to the Publish section of the dashboard and insert your HLS stream and JPG image links into the wizard:
In step 2 of the process, feel free to customize the dimensions, skins, and playback options of the player anyway you like. Click Get Embed Code when done. This resulting code can be placed in your webpage: the player library script in theand the actual embed code in the.
Demo and Wrap
Here is a live example of our test HLS stream, encoded with Elastic Transcoder, delivered through CloudFront, and played in JW Player. This stream works across mobile devices and desktops. It will adaptively change quality during playback based upon the available bandwidth:
As with all new technologies, this setup is not perfect yet. HLS support on Android in particular is quite flakey. The JW Player team is constantly working to identify and circumvent these bugs, so the highest number of viewers can be reached with a single HLS stream.