Need Step by step instructions adding VideoJs VAST plugin

Question

I'm trying to figure out how to add a pre-roll or VAST ads plugin into my VideoJS player but don't know how. I know there has to be files uploaded to my server to be called but I can't find them and the documentation in the plugin below is very vague. Also, does script code need to be placed in the head of my site?

I would greatly appreciate it if someone can show step by step instructions on how to add this plugin to my VideoJs player as well as what files need to be added to my server: http://theonion.github.io/videojs-vast-plugin/

Thank You

Answer 1

There github repo is pretty clear on this. I'll walk you through this anyways.

You need to add the supporting Javascript files and CSS.

<link href="videojs.vast.css" rel="stylesheet" type="text/css">   
<script src="vast-client.js"></script>
<script src="video.ads.js"></script>
<script src="videojs.vast.js"></script>

Then in your player configuration you have to tell the plugin where your VAST file is:

plugins: {
    ads: {},
    vast: {
        url: 'http://url.to.your/vast/file.xml'
    }
}

They have a nice example in github as well: https://github.com/theonion/videojs-vast-plugin/blob/master/example.html

Answer 2

as broonx mentioned, the files that need to be added are:

<script src="vast-client.js"></script>
<script src="video.ads.js"></script>
<script src="videojs.vast.js"></script>

which should be placed in your header (I like to put them in it after the cdn video.js code--http://vjs.zencdn.net/4.7.1/video.js"--because I want that to load first)

vast-client.js is located in the lib directory, video.ads.js is in lib/videojs-contrib-ads/, and videojs.vast.js is in the root directory of that repository

you could download them and self host them all in the same directory if you so chose. Just make sure you point to them when within that folder when you're calling the scripts from index.html

hope this helps!