Server Side Ad Insertion
A demo of how you can use server side ad insertion with the player
Server side ad insertion gives you the power of bypassing most of today’s ad blocking techniques, since a continuous stream is delivered.
In this demo the video will be interrupted by a mid-roll ad at around 30 seconds.
demo.js
js
var conf = {
key: '<YOUR PLAYER KEY>'
};
var source = {
dash: 'https://bitmovin-a.akamaihd.net/498364_fcb0257026d0bd3ee0ba3aad95674188/manifest.mpd',
hls: 'https://bitmovin-a.akamaihd.net/498364_fcb0257026d0bd3ee0ba3aad95674188/playlist.m3u8',
poster: 'https://bitmovin-a.akamaihd.net/498364_fcb0257026d0bd3ee0ba3aad95674188/poster.jpg'
};
var hidden = false;
var played = false;
var playerContainer = document.getElementById('player-container');
bitmovin.player.Player.addModule(bitmovin.analytics.PlayerModule);
var player = new bitmovin.player.Player(playerContainer, conf);
player.load(source).then(function () {
player.on(bitmovin.player.PlayerEvent.TimeChanged, function (data) {
if (player.getCurrentTime() >= 29.081333 && player.getCurrentTime() < 41.138666) {
document.getElementsByClassName('bmpui-ui-container bmpui-controlbar-top')[0].style.display = 'none';
hidden = true;
played = true;
} else if (hidden) {
document.getElementsByClassName('bmpui-ui-container bmpui-controlbar-top')[0].style.display = 'block';
}
});
player.on(bitmovin.player.PlayerEvent.Seek, function (data) {
if (data.seekTarget > 29 && !played
) {
player.seek(29);
played = true;
}
});
});
The Bitmovin Player’s Events API is used to hide some controls while ads play.
Since the ads are inserted into the content on the encoding level, they cannot be blocked by the client. See our blog post with more details on how to use our solution.