THEOplayer | Demo | Scheduling an ad

This page demonstrates how you can insert an ad at any given time, using the THEOplayer API.

The example below explains how you schedule a VAST ad by clicking a button.

Methods used from the Ads API:

player.ads.schedule(): inserts an ad in your video

The result:

The HTML code:

<div id="video-container" class="video-js theoplayer-skin theo-seekbar-above-controls"></div>
<button id="ad-button">Insert and play ad</button>

The JavaScript code:

// information on setting up THEOplayer and the player object can be found at https://docs.portal.theoplayer.com/docs/docs/getting-started/web/web

var videoContainer = document.querySelector('#video-container');
var player = new THEOplayer.Player(videoContainer);

// this method schedules an add
function scheduleAd() {
    player.ads.schedule({
        sources: '//cdn.theoplayer.com/demos/preroll.xml',
        timeOffset: 'start'
    })
}

// add a listener to call scheduleAd() when the custom button is clicked
document.querySelector("#ad-button").addEventListener('click', scheduleAd);

// initial video source
player.source = {
  "sources": [
    {
      "type": "application/dash+xml",
      "src": "https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd"
    }
  ]
};

THEOplayer Demo: Scheduling an ad