THEOplayer 3.X | 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.src = "http://amssamples.streaming.mediaservices.windows.net/634cd01c-6822-4630-8444-8dd6279f94c6/CaminandesLlamaDrama4K.ism/manifest(format=mpd-time-csf)";

THEOplayer 3.X Demo: Scheduling an ad