What you'll find in this guide:
- What is HLS
- Inserting HLS to FV Player
- Using in Browsers with Flash
- Using HLS with MSE/H.264
What is HLS
HLS (HTTP Live Stream) is a streaming protocol developed by Apple Inc. mainly for their iOS devices and Safari browser. The protocol is also supported by video players with Flash engine fallback (such as FV Player), on newer Android devices (introduced in 3.0 - Honeycomb) and with the use of HLS.js on all browsers that use the MSE specification. This guide will show you what to do to use HLS with FV Player and how to cover as many devices and browsers as possible.
The basic principle of HLS is breaking the video stream to small fragments of data (usually in the .ts format), that are loaded sequentially to create a continuous playback. The stream itself can hold a various number of sub-streams, that carry the same data, but differ in the encoding quality, thus allowing the device to automatically switch qualities to provide scalability on wide spectrum of bandwidths. The meta data containing all the information about the various sub-streams and the individual fragments are stored in a single playlist in .m3u8 format. The player uses this file to open a session and load the fragments.
HLS is based on HTTP transactions, so it's supported by most servers. It also allows encryption via AES algorithm (here is a guide on how to create encrypted HLS - How to setup encrypted HLS stream with Amazon Elastic Transcoder).
Inserting HLS to FV Player
Using the HLS stream with FV Player is very easy, just insert the link to the .m3u8 file in the shortcode editor to the Video field. The shortcode will look like this example:
As mentioned above, HLS is designed for iOS and Safari browser, so serving the stream on these platforms won't require any adjustments. Other devices will need some additional settings, as you will see further in this guide.
Using in Browsers with Flash
As mentioned above, FV Player can handle HLS streams via Flash fallback. However, it requires to have a crossdomain policy on the server. Create a crossdomain.xml file with this content:
<?xml version="1.0"?> <!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd"> <cross-domain-policy> <allow-access-from domain="*" secure="false"/> </cross-domain-policy>
Upload the crossdomain.xml to the root of document folder on the server you are using.
If you are serving your videos from Amazon S3, you will need to upload crossdomain.xml to the source bucket, where the videos are stored. You will also need to set the correct permissions of the XML file. Open the Properties, go to Permissions -> Add more permissions and add Everyone. Also check the boxes Open/Download and View Permissions (see the image below).
You can find more details and instructions on setting up cross domain policy in this guide.
Using HLS with MSE/H.264
You can activate this feature in Settings -> FV Player -> Setup tab -> Integrations/Compatibility and check the box Enable HLS.js.
If you want to use these streams, you will need to have the correctly set cross-domain policy (see above) for browsers that can't work with MSE, and more importantly, Cross-Origin Resource Sharing (CORS). To allow simple CORS requests from your server, you will need to add this header to your server's response:
For information on how to enable CORS on a specific server, follow this link.
Enabling CORS in Amazon S3
To configure CORS in Amazon S3, create an XML file (like you did with cross domain policy) with this content:
<?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <MaxAgeSeconds>3000</MaxAgeSeconds> <AllowedHeader>*</AllowedHeader> </CORSRule> </CORSConfiguration>
To allow this in Amazon S3, you just need open the Properties of your source bucket, then go to Permissions and you will see a button Add CORS Configuration. Paste there the code written above and save.
Enabling CORS in CloudFront
To allow CORS with your CloudFront distribution, you will need to do some additional configuration:
- Select the distribution you want to use (if you don't have an existing distribution, check this guide - Serving Private Videos via CloudFront)
- Go to Distribution Settings -> Bahaviors. You can edit the Default behavior
- Go to Forward Headers and change None (Improves Caching) to Whitelist
- A new property will appear - Whitelist Headers. Here you should see three default headers. Select all of them and click Add. They will move to the box on the right and you can save the changes by clicking Yes, Edit in the
bottom right corner.
- Make sure you also complete the Enabling CORS in Amazon S3 steps
- It will take some time for these changes to take effect due to caching of the CloudFront network
Note: FV Player has the ability to automatically fall back to using Flash, if CORS is not set properly. You will be able to see it in the browser console, which will show response "FV Player: HLSJS failed to play the video, switching to Flash HLS".
Clearing the CloudFront Cache
If you have an existing distribution that is already used for serving video content and you add the CORS headers, or do any other change that can affect the videos, you should clear the cache on all edge servers. This way you can make sure that the changes are really applied instead of using the cached old version.
To clear the cache, you will have to create an invalidation in the distribution settings.
- Start with opening the settings of the distribution you want and go to the Invalidations tab. There click on the Create Invalidation button.
- Now you can select, which objects (in this case videos) you want to clear from the cache. We of course want to clear them all, so we can use the "*" wildcard. Therefore, just write "/*" - that specifies all the objects in the source
bucket of your distribution. Afterwards click the Invalidate button.
- The invalidation will take a only a minute or two. You will see that it's finished when the status changes from "In progress" to "Completed".
Here are example videos: