HTML5 vast pre-roll video ads with skip ad feature

https://ciphertrick.com/html5-vast-pre-roll-video-ads-with-skip-ad-feature/

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

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

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

Search This Blog

ads