Skip to main content

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 is in the form

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

You must replace *** with the Watching That customer ID received from us.

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="https://cdn.watchingthat.net/***.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="https://cdn.watchingthat.net/***.wtat.plugin-vjs_ima.min.js"></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).