THEOplayer 2.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 Ad API:

  • 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

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

// this method schedules an add
function scheduleAd() {{
        sources: '//',
        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 = "";