How to use FlowPlayer to play HLS video without Flash plugin

Last update: 20170811

Flash is dead, announced by Adobe on 25th July 2017.

One major use of Flash is to playback video in browsers. If one uses videos on its website, one should better update its website to playback video without using Flash.

So I am going to do it now.

Mobile first, I use HLS videos in my website. It is year 2017 and HLS is the de facto video streaming communications protocol for mobile devices. However, many desktop browsers such as IE and Chrome do not natively support HLS. They cannot playback HLS video! Here is the list of browsers with HLS native support at Bitmovin.

In order to make videos viewable in all browsers and on all devices, there are video players to achieve cross browser and cross device compatibility. Flowplayer, Video.js and JWPlayer are the most popular ones. I am going to use the free version Flowplayer on my website.

The Flowplayer hlsjs plugin enables HLS playback in modern browsers and devices without requiring Flash. Here is the official setup documentation. In short, I have to do two things:

• add Flowplayer skin, library and engines in the head section of webpage
• install Flowplayer & using Pure Javascript methods in the body section

Here is the demo page using Flowplayer hlsjs plugin: demo.cheungwaikin.com/flowplayer.html. The two things above-mentioned can be easily identified in the html source.

Notes:

1. I use AWS S3 to keep the HLS files. More information at my previous post How to use AWS S3 as Customer Origin for HLS videos
2. I am comparing Soasta and Pingdom RUM solutions on my demo pages. I need more real users to generate more measurements. Please help to share my demo site demo.cheungwaikin.com with your friends.
3. I am testing Fastly and NS1 Geotarget routing DNS feature. Here is the testing page: cdn.ns1.cheungwaikin.com

Last but not least, may God bless the people in Jiuzhaigou.

---