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,

index.html

HTML5 vast pre-roll video ads


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,

  1. servers  :- pass vast xml file url to “apiAddress” key.
  2. 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“.

  1. post-roll :- is same as pre-roll.
  2. mid-roll :- in this we are passing two fields which is,
    1. position :- that is “mid-roll”.
    2. 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“.

vod/testads1.xml






2.0
Sample


00:02:00




http://www.ciphertrick.com/demo/htmlvast/vod/sample.mp4





2.0
Sample


00:02:00




http://www.ciphertrick.com/demo/htmlvast/vod/sample.mp4





2.0
Sample


00:02:00




http://www.ciphertrick.com/demo/htmlvast/vod/sample.mp4




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.

39 Comments

    1. 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.

      Reply

  2. 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

    Reply

    1. 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.

      Reply

      1. 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

        Reply

        1. 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.

          Reply

          1. hi @Inaam Hussain
            advertisement is not playing in firefox, please help by the upate version

    1. Hey Inaam Thanks for the reply,

      Sorry to explain wrongly.

      Internet explorer https is giving problem in mobiles
      ads also not playing in ie

      Reply

    2. 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

      Reply

  4. 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

    Reply

    1. 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.

      Reply

      1. 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

        Reply

        1. 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.

          Reply

  6. Hi,
    Downloaded your sample files, ad is not playing in Safari and Chrome in Mac.
    Is there a updated scripts available?

    Reply

  7. 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!

    Reply

  8. 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.

    Reply

  9. 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

    Reply

    1. 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.

      Reply

  10. AOA, Inaam,

    Can we use live stream(RTMP/RTSP or HLS) instead of video link in the source? if yes then tell plzz Thanx

    Reply

  11. 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?

    Reply

    1. 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.

      Reply

  12. 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.

    Reply

      1. 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!

        Reply

    1. 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.

      Reply

  17. 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

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *