Video Companion Ads

What is VAST?

The IAB’s Video Ad Serving Template (VAST) specification is a universal XML schema for serving ads to digital
video players. It provides support for linear pre-roll, mid-roll and post-roll MP4/FLV/WebM video ads as well
as non-linear GIF/JPG/PNG, Flash (SWF), text, HTML, <IFRAME> and <SCRIPT> banners. In addition to this
it also specifies video tracking events, which enables measurement of video advertising consumption.

Video Companion Ads

Companion ads are banners that are designed to be displayed near the video player.
They stay visible after the accompanying pre/mid/post-roll video has played. This
keeps the advertiser on the viewers mind and does a great job of reinforcing their
brand without being too interruptive.

Getting Started

In our previous tutorial
we showed you how to run pre-roll video ads with RackSpace Cloud Files and JWPlayer.
This tutorial continues where it left off. If you aren’t already familiar with
video ads you’ll definitely want to go back and start with that tutorial first.

Video Player Configuration

Enabling companion banners requires only a few simple changes to the player embed
code from our previous tutorial.

Here’s the original code for reference:

<div id='playerlY5ILoW2TpH4'></div>
<script type='text/javascript'>
    jwplayer('playerlY5ILoW2TpH4').setup({
        file: 'http://e736daa9861a3da5faf4-49d13c85de3b1b0658221edbffbf1629.r69.stream.cf2.rackcdn.com/traintracks.mp4',
        image: 'http://8ea7863d68099f00b39c-49d13c85de3b1b0658221edbffbf1629.r69.cf2.rackcdn.com/traintracks480.jpg',
        width: '480',
        height: '270',
        aspectratio: '16:9',
        stretching: 'fill',
        primary: 'flash',
        advertising: {
            client: 'vast',
            tag: 'https://tester.advertserve.com/servlet/vast2/media?mid=124&pid=0&random=__random-number__'
        }
    });
</script>

What we need to do is insert the follow companiondiv settings into
the advertising configuration:

companiondiv: {
    id: 'playerlY5ILoW2TpH4_companion',
    width: '300',
    height: '250'
}

This tells JW Player that our page will contain a
<div id="playerlY5ILoW2TpH4_companion"></div>
tag where it should insert a 300×250 companion banner. The VAST Tag that we’re using
in this example actually provides both 300×250 and 728×90 companion banners. As an exercise you
can try switching between the two sizes for extra practice.

Putting all of this together here’s the final code that you should have:

<div id='playerlY5ILoW2TpH4'></div>
<script type='text/javascript'>
    jwplayer('playerlY5ILoW2TpH4').setup({
        file: 'http://e736daa9861a3da5faf4-49d13c85de3b1b0658221edbffbf1629.r69.stream.cf2.rackcdn.com/traintracks.mp4',
        image: 'http://8ea7863d68099f00b39c-49d13c85de3b1b0658221edbffbf1629.r69.cf2.rackcdn.com/traintracks480.jpg',
        width: '480',
        height: '270',
        aspectratio: '16:9',
        stretching: 'fill',
        primary: 'flash',
        advertising: {
            client: 'vast',
            tag: 'https://tester.advertserve.com/servlet/vast2/media?mid=124&pid=0&random=__random-number__',
            companiondiv: {
                id: 'playerlY5ILoW2TpH4_companion',
                width: '300',
                height: '250'
            }
        }
    });
</script>

Final Thoughts

Stay tuned for the final blog in this series covering non-linear banners.
That will also be done with JWPlayer. For help with other video players, see the
VAST chapter
in our user manual.

Can’t wait for more? You’ll find more examples and configuration help in the official
JWPlayer video ads
documentation.

Start Your Free Trial

Interested in giving AdvertServe a spin? Check out our demo page take a look at our interface and get an overview of the ad management process. When you’re ready, sign up for your free 30 day trial¬†