What you’ll find in this guide:
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 newer Android devices (introduced in 3.0 – Honeycomb) and with the use of HLS.js, on all browsers that use the MSE specification. Using HLS Streams, is also one of the better methods of video security. 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. We offer several options for creating encrypted HLS. You can use FV Player Coconut, which includes DigitalOcean hosting, Bunny CDN and Coconut encryption. If you’d like to go with Amazon Web Services, you can start by creating an S3 bucket. Lastly, if you do not need encryption, you’ll do just great with Bunny Stream.
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 editor will look like this example:
Click here to watch the sample video (it will appear in a Lightbox).
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 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 correctly set the 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.
Examples
Here are example videos:
