Advertisements
The default UI has full support for advertisements.
During playback, it shows yellow ad markers on the seek bar to indicate the times when the content will be interrupted by an ad.
While playing an ad, the UI shows ad-specific controls such as a skip button and a countdown. These controls are also mobile-aware, for example a dedicated clickthrough button replaces the regular clickthrough behavior on desktop.
Code
var ui = document.querySelector('theoplayer-default-ui');
ui.source = {
sources: 'https://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8',
ads: [
{
sources: {
src: 'https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/vmap_ad_samples&sz=640x480&cust_params=sample_ar%3Dpremidpostpod&ciu_szs=300x250&gdfp_req=1&ad_rule=1&output=vmap&unviewed_position_start=1&env=vp&impl=s&cmsid=496&vid=short_onecue&correlator=',
type: 'vmap'
}
}
]
};