Preroll / midroll / postroll
CSS
.counter-button {
display: none;
position: absolute;
bottom: 80px;
right: 10px;
font-size: 14px;
border: 0;
color: #F2F2F2;
background-color: rgba(0,0,0,.8);
border: 1px solid #F2F2F2;
}
.counter-button:hover {
background-color: rgba(0,0,0,.5);
}
.counter-button.on {
display: inline-block;
}
Javascript
var vault = {
origin: {},
onPlay: function(){},
onStop: function(){},
timer: false,
index: 0,
adv: [{
file: '/adv/file.mp4',
url: 'https://advdomain.tld',
live: true,
mode: 'legacy',
skip: 5,
played: false,
},{
file: '/adv/file-2.mp4',
url: 'https://advdomain.tld',
mode: 'legacy',
live: true,
skip: 5,
played: false,
}],
};
var clone = function(o) {
if (!o || typeof o !== 'object') {
return o;
}
var _clone = new o.constructor();
for (var i in o) {
_clone[i] = clone(o[i]);
}
return _clone;
};
var origin = function(data) {
if(typeof data === 'undefined') {
return vault.origin;
}
vault.origin = clone(data);
};
var counterButton = function(player, e) {
if(typeof e !== 'undefined') {
var button = $(e)
.css({
'z-index': player.env.shield.css('z-index') + 20
});
player.env.shield.after(button);
}
return player.env.instance.find('button.counter-button');
};
var advertise = function(player, data) {
if(vault.index == 0) {
var button = counterButton(player, '<button class="counter-button"></button>');
origin(player.options.source);
vault.onPlay = player.options.onPlay;
vault.onStop = player.options.onStop;
}else{
clearInterval(vault.timer);
}
if (vault.index <= (vault.adv.length - 1)) {
player.env.toolbarTop.css({
'display': 'none'
});
player.env.buttons.settings.css({
'display': 'none'
});
player.options.onStop = advertise;
var src = vault.adv[vault.index];
player.options.onPlay = function(player, data) {
player.env.shield
.off('click')
.on('click', function(e) {
e.preventDefault();
player.Controls.press('pause');
window.open(src.url);
});
if (src.skip > -1) {
var button = counterButton(player);
button.addClass('on');
vault.timer = setInterval(function() {
if (Number(src.skip) > Number(player.env.api.currentTime)) {
rest = Number(src.skip) - Number(player.env.api.currentTime);
button
.off('click')
.html('Skip advertising in ' + player.Timecode.toHuman(rest));
} else {
button
.on('click', function() {
player.env.api.currentTime = player.env.api.duration;
})
.html('Skip advertising <i class="warp-icon warp-forward"></i>');
}
}, 100);
} else {
button.remove();
}
}
} else {
var button = counterButton(player);
button.remove();
var src = origin();
player.env.toolbarTop.css({
'display': 'block'
});
player.env.buttons.settings.css({
'display': 'block'
});
player.options.onPlay = vault.onPlay;
player.options.onStop = vault.onStop;
player.env.shield.off('click').on('click', function(e)
{
e.preventDefault();
e.stopPropagation();
player.Ui.state( player.env.menus.settings, 'on', '');
if( e.type == 'click' )
{
if( player.options.pauseOnClick === true && player.Support.isMobile() === false )
{
if( player.env.api.paused === false )
{
player.Controls.press('pause');
}else{
player.Controls.press('play');
}
}
}
if( e.type == 'dblclick' )
{
if( player.env.instance.hasClass('warp-fullscreen-on') )
{
player.Controls.press('fullscreen-off');
}else{
player.Controls.press('fullscreen-on');
}
}
});
}
player.Source.set(src);
if (vault.index > 0) {
player.Controls.press('play');
}
vault.index++;
};
var players = {};
players[0] = $('#video-0').warpPlayer({
debug: false,
responsive: true,
pauseOnClick: true,
dimensions: [
[960,540],
[640,360],
],
onInit: advertise,
});