HTTP Live Streaming(HLS) With VAST by Using Fluid Player

Today, I wanted to put ads on my live streaming something like Youtube. After spending a couple of moments I found  Adsterra which provides a VAST tag for videos and live streams. 

I was using Clappr which is a Javascript library for HLS-based live streaming. When I realized that I should put ads on my live stream to generate some revenue from my website then I started exploring the ads feature of Clappr. I saw there are some plugins available for Clappr which can add this feature to Clappr but unfortunately, all those are outdated and their developers are not supported them. 

1. https://github.com/va-an/clappr-vast-ad-plugin
2. https://github.com/mycujoo/clappr-vast-plugin
3. https://github.com/va-an/clappr-vast-ad-plugin

I gave a try to all these outdated plugins but unfortunately, those didn't work because of version incompatibility.  

Then I contact Adsterra technical support to help me. They name some plugins which are listed below but most of them are paid except the one.

1. Brightcove
2. Brid. TV
3. JW Player
4. Ooyala
5. Video.js

Only Video.js is free among them. 

After receiving this list I gave it a try to Video.js because it also supports HLS-based live streaming. This time I found some outdated VAST scripts for old Video.js versions which are working online but I failed to run them on my website. 

1. https://github.com/MailOnline/videojs-vast-vpaid
2. https://codepen.io/Viblast/pen/ZQLwOm
3. https://theonion.github.io/videojs-vast-plugin/

To configure VAST for Video.js, we need to import many Javascript and CSS CDNs which can slow down the website.

So, I became disappointed with both Clappr and Video.js and started searching for another option.

After a couple of moments, I found Fluid Player. The Fluid Player is an independent and open-source HTML5 Player. It comes as a single Javascript file, unlike Video.js

This plugin supports HLS-based video streaming as well as VAST. This plugin has out-of-the-box support for WordPress, Vue, React and Angular.

I don't want to go deeper because the documentation is very simple and organized.

But here I will link a demo of my working code. In this code just change your VAST tag and M3U8 streaming URL and enjoy.

Demo Code: https://gist.github.com/iamsajidjaved/eb4dec2238fe7f0345fb8c7e5072ead1

Live Demo with Some SEO: https://sports.sajidjaved.com/avt-khyber.html

Thats it!

Thanks for reading