In this tutorial I will show you how to add HTML5 vast pre-roll video ads with skip ad button.
View demo – here
Download Code – here
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,
Skip
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.

Meet Mukul, a passionate visionary and a dedicated 3D printing enthusiast. With an insatiable curiosity for technology and a flair for creativity, Mukul has discovered a world where innovation knows no bounds. Armed with a deep understanding of 3D printing and its endless possibilities, he has become a true pioneer in the field, constantly pushing the boundaries of what can be achieved with this remarkable technology.
i tried to replace the vod/testads1.xml by the liverail demo http://ad3.liverail.com/?LR_PUBLISHER_ID=1331&LR_CAMPAIGN_ID=229&LR_SCHEMA=vast2 and it doesnt work.
I think the problem is with the ‘id’ of ad tag in xml.
link that you have mentioned of xml file in that id is id=’229′ and while parsing xml it is looking for is pre-roll , post-roll & mid-roll like ( i.e : id=’pre-roll-0′).
what you can do is change id of ad tag in xml file from id=’229′ to id=’pre-roll-229′.
or else need to change functionality in vastvideoplugin.js plugin as required.
I tried to open your demo in IE and Mozila. but ad is not displaying..I need to develop a demo application exactly same to this demo…so could u guide me to solve this issue
Hi Priya,
Just now i have checked in Mozilla and it’s working fine. also checked in IE but ad is not playing as required. i am looking in to it and get back to you.
can you please tell me the browsers version of Mozilla and IE.
Thanks.
Hi Inaam,
Thanks for uour quick response!
I am using mozila 35.0.1 version in ubuntu 14.0 and mozila 31.0 for windows.
In ubuntu it’s not loading. It’s showing “MIME type is not supported for video”
and in windows its playing the video but ad is not showing in the pre-roll and mid-roll and post-roll position. Its showing only loading icon.
I could play your video in google chrome..
Thanks,
priya
Hi priya,
I solved the problem for older versions of Mozilla & Safari and it’s playing ads properly. you can download latest code.
And further also working on for supporting in IE & ubuntu’s mozilla browsers.
Thanks for the response.
hi @Inaam Hussain
advertisement is not playing in firefox, please help by the upate version
Hi jaydeep,
I have checked in firefox its working fine.
can you describe more on your problem. about exactly what problem you facing.
Thanks.
Hey Inaam Thanks for the reply,
Sorry to explain wrongly.
Internet explorer https is giving problem in mobiles
ads also not playing in ie
HI inaam,
We are waiting for your reply,
Sorry to explain wrongly.
Internet explorer https is giving problem in mobiles
ads also not playing in ie
regards
-Jay
Hey Inaam,
Thank you so much for this. You have saved my day. It is really helpful.
But only thing I am not able to set mid-roll exactly where should i put startime and also not able to see advertisement on the chrome can you please fix asap.
Regards
Sachin
Hi Sachin,
For mid-roll ads you need to pass following object on schedule array in video element on index.html page. For Example,
In above code you can see mid-roll with it’s time.
And for chrome issue, can you elaborate the problem you are facing. However i have checked in chrome it is working fine for me.
Thanks.
Hi Inaam,
Thanks for the reply. It works fine. In chrome I am not able to see the thumbnail when we open index.html. Also one more question can i use this offline. I have tried to edit testads1.xml file with localhost path to video but not able to get success.
Can you please help me out.
Regards,
Sachin
In chrome you see that its a starting part of video. and its white.
Yes you can do offline. Make sure all the files are present at required location.
And for path you should use absolute path so that we can access that video.
Thanks.
Hi i can get the pre roll ads to play in IE9 have you found a solution to this problem yet?
Hi Jonathan,
It should work on IE. For me its working perfect as required.
Thanks.
Hi,
Downloaded your sample files, ad is not playing in Safari and Chrome in Mac.
Is there a updated scripts available?
Hi Sean,
I am working on it for safari and chrome for mac. will revert back to you once it’s done.
Thanks for the comment.
Hi Inaam, do you know if this plugin will work with a video player like Video JS or JW player? I’m trying to use it with one of those and having trouble. Thank you!
Assalam o Alikum Friend ,
My chrome Version is 45.0.2454.101 m that is latest one, i am not able to see ads after loading a page just playing normal video without ads and without error. On Firefox all is working fine showing ads then video. can you please check and reply.
walekum assalam Yasir,
Just checked in chrome 45.0.2454.101 m and it’s working properly with ads. Can you please check that demo video again.
Thanks.
Salam Alaykoum,
Can I use this script with any player, such as HTML5 Player, as I am using a script like Youtube:
ClipBucket I am sure you’ve heard of it ?
Please if so let me know what I need to edit within the player to get this working for every video, that is played on my site, is it possible ?
Thanks
Salam
Hi Sam,
I believe first you should check for their HTML5 player with ads if available. otherwise you have to use this script separately. you can use one script at a time.
Thanks.
AOA, Inaam,
Can we use live stream(RTMP/RTSP or HLS) instead of video link in the source? if yes then tell plzz Thanx
This was an awesome introduction into vast. So simple, code easy to read. Thank you. As it happens, HTML5 video doesn’t work very well for iOS for anything other than playing a video. So for mobile, you need something fancier. Any good recommendations?
Hi Kate,
Yes we can change as per what we need and how it should play. and it’s working fine with ios too. will try and check for ios for more information and addition, so that it’s look great and work properly.
Thanks for the comment.
On iOS your demo plays the pre-roll, but then doesn’t start the video content after that automatically. You have to hit The iOS play button to play it.
Hi Rover,
i believe it should work. will check and revert back to you as soon as possible.
Thanks.
At least under iOS 9.x it doesn’t work. It stops after pre-roll and you have to explicitly press play again to get the actual content video to play.
Would love to use this if I could fix that!
Hi inaam,
Will this player support If i pass youtube link as src ???
Thanks and regards
Jaydeep
Hi Jaydeep,
Yes. it should work.
Thanks.
Hi
its not working for my vast tag (from dfp )
any help ?
Hi Nafisa,
I need to check that in deep. that how we can implement. will let you know once i have solution for the same.
Thanks.
great work
hi
how this work for dynamic video ?
Hi Vid,
What kind of dynamic video you talking about?
You mean to say that different URL based on different condition. then you just have to change the URL and set config based on that.
Thanks.
Hi,
i appreciate your effort for this script.
i just upload your script here
http://globcpm.com/cipherads/
it did not load my vast preroll tag
http://ssp.lkqd.net/ad?pid=229&sid=37432&output=vast&execution=instream&placement=preroll&playinit=auto&volume=100&width=%5BWIDTH%5D&height=%5BHEIGHT%5D&dnt=%5BDO_NOT_TRACK%5D&pageurl=%5BPAGEURL%5D&ip=%5BIP_ADDRESS%5D&ua=%5BUSER_AGENT%5D&contentid=%5BCONTENT_ID%5D&contenttitle=%5BCONTENT_TITLE%5D&contentlength=%5BCONTENT_LENGTH%5D&contenturl=%5BCONTENT_URL%5D&rnd=%5BCACHEBUSTER%5D
also it did not autoplay banner and video.
Thanks
this code not works in microsoft edge Latest IE latest FIREFOX and google chrome also
please help me …
Hi
I want to know exact feild where I will paste the vast code