Flowplayer CDN Integration
Flowplayer is an online video platform that offers three main products:
- A video player
- A video platform
- Video advertising
Their video player is built to be minimalist and performant. With all CSS, JavaScript, and graphics required to load the video player resulting in a total file size of just 216 KB, it makes them one of smallest video players on the market in terms of size.
If you're looking to further accelerate the delivery of your Flowplayer videos, follow one of the Flowplayer CDN integration methods below. If you already have an origin server where your videos are hosted, use the Pull Zone method. Otherwise, if you want to upload videos to the KeyCDN storage cluster, use the Push Zone method.
Simple Flowplayer CDN integration
There are two ways to accelerate your Flowplayer videos via KeyCDN. You can either use a Pull Zone or a Push Zone. The process for setting each Flowplayer CDN integration is fairly similar for both methods.
Before setting up the CDN integration ensure that you've downloaded Flowplayer and uploaded the contents to your server.
We recommend using HLS as your video format for better delivery/caching performance. Check out the following guide if you need to convert an MP4 file to HLS.
Using a Pull Zone
Create a Pull Zone via the KeyCDN dashboard that points to your origin URL.
Add the following code to a page on your site. Ensure that you include the
<head>scripts and that you replace the Zone URL.... <head> <!-- flowplayer depends on jQuery 1.7.1+ (for now) --> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <!-- flowplayer.js --> <script type="text/javascript" src="flowplayer.min.js"></script> <!-- player styling --> <link rel="stylesheet" type="text/css" href="flowplayer/minimalist.css"> </head> <body> <!-- player 1 --> <div class="flowplayer"> <video src="https://example-hexid.kxcdn.com/videos/your-video.m3u8"></video> </div> </body> ...Check that your video is loading properly from the CDN.
Using a Push Zone
- Create a Push Zone in your KeyCDN dashboard.
- Upload a video file to your Push Zone through FTP(S) or rsync.
- Add the same code snippet to a page on your site as shown above and replace the sample Zone URL with the Zone URL and path of your Push Zone.
- Check that your video is loading properly from the CDN.
Summary
Using a Flowplayer CDN integration with KeyCDN is pretty simple. All you need to do is ensure Flowplayer is installed properly on your server and replace the video URLs with the CDN URL. There are of course other options available besides the simple snippet configuration outlined in this article. For more details about Flowplayer, visit their documentation page.