In this tutorial I will show you how to add HTML5 vast pre-roll video ads with skip ad button.
what is VAST?
VAST is Digital Video Ad Serving Template. which is used for standardize the communication requirements between video players and the ad servers.
So lets first start with HTML structure,
In above code I’ve added ads, attribute in video tag to which we are passing an object (containing the details of ad).
so in this object having 2 major fields which are,
- servers :- pass vast xml file url to “apiAddress” key.
- schedule :- pass “pre-roll” to “position” which is captures that ads url and will play before actual video plays.
There are 2 more scheduling options like “post-roll“(Shows add at the end of the video) and “mid-roll“(Shows add in between the video)
Lets also learn how to pass value to object for “post-roll” and “mid-roll“.
- post-roll :- is same as pre-roll.
- mid-roll :- in this we are passing two fields which is,
- position :- that is “mid-roll”.
- startTime :- in this we need to define when ad should play in between actual video (i.e : “startTime“: “00:00:08” ).
Structure of XML file?
See below XML code in which I have added Ad structure for “pre-roll“, “post-roll” and “mid-roll“.
We have used “html5videovastplugin.js” plugin for controlling actual video with ad and also made the modification in that plugin to support functionality for “skip ad” button. By clicking skip ad button actual video will start to play automatically.
I build websites | Been building websites for the last 3 years and been venturing into App Development now.