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 300x250 companion banner. The VAST Tag that we're using in this example actually provides both 300x250 and 728x90 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.