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,
});