HTML5 vast pre-roll video ads with skip ad feature

December 13, 2014
by Inaam Hussain

In this tutorial I will show you how to add HTML5 vast pre-roll video ads with skip ad button.

View demohere
Download Codehere

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
<!DOCTYPE html>
<html>
<head>
  <title>HTML5 vast pre-roll video ads</title>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script src="js/vastvideoplugin.js"></script>
    <link rel="stylesheet" type="text/css" href="css/site.css">
</head>
<body bgcolor="#424142">
<center>
<div>
    <video id="example_video_1" src="vod/sample2.m4v" width = "640" height="480" controls  
    ads = '{"servers":[
                           {"apiAddress": "vod/testads1.xml"}
                         ],
               "schedule":[
                            {"position":"pre-roll"}
                          ]
              }'>

        </video>
</div>
<span class="skipBtn">Skip</span>
</center>
<script>initAdsFor("example_video_1");</script>
</body>
</html>

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
<?xml version="1.0" encoding="UTF-8"?>
<VAST version="2.0" >
<Ad id="pre-roll-0">
    <InLine>
    <AdSystem>2.0</AdSystem>
    <AdTitle>Sample</AdTitle>
    <Impression></Impression>
    <Creatives>
        <Creative sequence="1" id="2" >
        <Linear>
        <Duration>00:02:00</Duration>
        <AdParameters>
        </AdParameters>
        <MediaFiles>
            <MediaFile delivery="progressive" bitrate="400" type="video/mp4">
                <URL>http://www.ciphertrick.com/demo/htmlvast/vod/sample.mp4</URL>
            </MediaFile>
        </MediaFiles>
        </Linear>
        </Creative>
    </Creatives>
    </InLine>
</Ad>
<Ad id="post-roll-0">
    <InLine>
    <AdSystem>2.0</AdSystem>
    <AdTitle>Sample</AdTitle>
    <Impression></Impression>
    <Creatives>
        <Creative sequence="1" id="2" >
        <Linear>
        <Duration>00:02:00</Duration>
        <AdParameters>
        </AdParameters>
        <MediaFiles>
            <MediaFile delivery="progressive" bitrate="400" type="video/mp4">
                <URL>http://www.ciphertrick.com/demo/htmlvast/vod/sample.mp4</URL>
            </MediaFile>
        </MediaFiles>
        </Linear>
        </Creative>
    </Creatives>
    </InLine>
</Ad>
<Ad id="mid-roll-0">
    <InLine>
    <AdSystem>2.0</AdSystem>
    <AdTitle>Sample</AdTitle>
    <Impression></Impression>
    <Creatives>
        <Creative sequence="1" id="2" >
        <Linear>
        <Duration>00:02:00</Duration>
        <AdParameters>
        </AdParameters>
        <MediaFiles>
            <MediaFile delivery="progressive" bitrate="400" type="video/mp4">
                <URL>http://www.ciphertrick.com/demo/htmlvast/vod/sample.mp4</URL>
            </MediaFile>
        </MediaFiles>
        </Linear>
        </Creative>
    </Creatives>
    </InLine>
</Ad>
</VAST>

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.

About

Engineer. Blogger. I like to be updated on new upcoming emerging technologies.

Free PDF

Subscribe and get AngularJS Tips PDF. We never spam!
First Name:
Email:

40 comments

    • |

      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.

  1. priya
    |

    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.

      • priya
        |

        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.

          • jaydeep
            |

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

  2. |

    Hi jaydeep,
    I have checked in firefox its working fine.
    can you describe more on your problem. about exactly what problem you facing.

    Thanks.

    • jaydeep
      |

      Hey Inaam Thanks for the reply,

      Sorry to explain wrongly.

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

    • jaydeep
      |

      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

  3. |

    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,

      <video id="example_video_1" src="vod/sample2.m4v" width = "640" height="480" controls  
      ads = '{"servers":[
                          {"apiAddress": "vod/testads1.xml"}
                      ],
                   "schedule":[
                          { "position": "mid-roll",
                            "startTime": "00:00:08"
                          }
                      ]
                  }'
      </video>

      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.

  4. |

    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.

  5. Sean
    |

    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.

  6. |

    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!

  7. Yasir
    |

    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.

  8. Sam
    |

    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.

  9. Yasir
    |

    AOA, Inaam,

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

  10. |

    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.

  11. Rover
    |

    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.

      • Rover
        |

        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!

  12. jaydeep
    |

    Hi inaam,

    Will this player support If i pass youtube link as src ???

    Thanks and regards
    Jaydeep

    • |

      Hi Jaydeep,
      Yes. it should work.
      Thanks.

  13. nafisa
    |

    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.

  14. vid
    |

    great work

  15. vid
    |

    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.

  16. Suyog Jadhav
    |

    this code not works in microsoft edge Latest IE latest FIREFOX and google chrome also
    please help me …

Leave a Comment