VideoJS

Requirements

For ad support in VideoJS, you might need extra 3rd party plugins:

• One for managing the lifecycle of ads, handling errors, switching from the ad to the content, triggering the proper events (like ad starting, ad 50% through, ad ended, etc)
• One for setting up the ads, "telling" VideoJS what to play in an ad slot and communicating with the ad manager.

Our VideoJS plugin assumes you're using videojs-contrib-ads so it listens for events generated by it. If your VideoJS plugin stack differs you might have to either use our custom events functionality or get in touch with us to add support for your plugin stack.

Here's a small demo built with videojs-contrib-ads and videojs-ima. You can inspect its source code to see how everything is linked together.

note

Because the apiKey is set to an invalid value on the demo page you will receive a 401 Unauthorized HTTP message back for every message sent to our collector endpoint. This will not happen in a production environment when using a valid key.

Load

The plugin url for the US zone is

https://cdn.watchingthat.net/us.wtat.plugin-vjs_ima.min.js

and for EU is

https://cdn.watchingthat.net/eu.wtat.plugin-vjs_ima.min.js

note

Depending on your contractual agreement with us your data could be hosted in US, Europe or other zone. Make sure you use the correct plugin url otherwise your data will not be routed correctly.

The first step to getting our plugin running is to load it. The simplest way to load the plugin is via a script tag:

<script src="<one of the plugin urls listed above>"></script>

// for example:

<script src="https://cdn.watchingthat.net/us.wtat.plugin-vjs_ima.min.js"></script>

However, you should load it after loading VideoJS and contrib-ads as our plugin will try to register with videojs as soon as it finishes loading:

<script src="https://url/to/videojs.min.js"></script>

<script src="https://url/to/videojs-contrib-ads/videojs.ads.min.js"></script>

<script src="<one of the plugin urls listed above>"></script>

Init

Once the plugin has been loaded you can then start it. If it successfully managed to register with VideoJS, it should be available as a method on the player:

<script>

const player = videojs('content_video');

player.wtAdTracer({ apiKey: '<api key you got from WatchingThat>' });

</script>

See the configuration options for the options you can use to start the plugin (only apiKey is required).