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.

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:

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

Most of the modern browsers use the Media Source Extensions specification and the most commonly used codec - H.264, to play videos. To make HLS work with these browsers, Dailymotion has developed an open source Javascript library called hls.js. This client integrates existing HLS clients and uses HTML5 video and Media Source
Extensions to play videos without using Flash, thus making it compatible with almost every modern browser.

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:

Access-Control-Allow-Origin: *

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:

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:

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.

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.

Using the "*" wildcard to clear the whole CloudFront cache

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".