Demo THEOplayer
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)";
Still wasting time debugging video playback problems?
Welcome to cutting-edge video, delivered efficiently and on any platform. We think you're going to like it.
