Video Without Video Center

The video player can be leveraged directly without Video Center. This can be useful for running live streams, looping videos, an ad without a video, etc. Instead of using powaBoot.js and powaDrive.js, you’ll need powa.js. Each organization is assigned their own distribution for player scripts, so you’ll need to determine which domain to use. (e.g. https://{your org id}.video-player.arcpublishing.com/prod/powa.js)

Examples

Basic

const powa = new PoWa({
    id: '#myPlayer',
    stream: 'https://example.com/video.mp4',
    ready: (payload) => {
        console.log('PoWa ready!', payload);
    },
    error: console.error,
    promo: {
        image: 'https://example.com/promo.png',
    },
});

Live stream

Configuring a player as live employs slightly different controls with buttons to skip forward and back but no scrubber nor time displayed.

const powa = new PoWa({
    id: '#myPlayer',
    live: true,
    stream: 'https://example.com/video.mp4',
    ready: (payload) => {
        console.log('PoWa ready!', payload);
    },
    error: console.error,
    promo: {
        image: 'https://example.com/promo.png',
    },
});

Looping video

const powa = new PoWa({
    id: '#myPlayer',
    loop: true,
    stream: 'https://example.com/video.mp4',
    ready: (payload) => {
        console.log('PoWa ready!', payload);

        const powa = payload.detail.powa;
        powa.on(PoWa.EVENTS.LOOP, event => console.log(`Loop: ${ event.loopCount }`));
    },
    error: console.error,
    promo: {
        image: 'https://example.com/promo.png',
    },
});

Autoplay with ad

const adTag = 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator=';
const powa = new PoWa({
    id: '#myPlayer',
    stream: 'https://example.com/video.mp4',

    ready: ({powa, autoplay, autoplayStatus}) => {
        console.log('PoWa ready!', powa);
        console.log('Autoplay setting:', autoplay);
        console.log('Autoplay status:', autoplayStatus);
    },
    error: console.error,

    promo: {
        image: 'https://example.com/promo.png',
    },

    autoplay: true,
    muted: true,

    ads: true,
    getAdTag: () => adTag,
});

Just an ad (e.g. before launching a crossword puzzle or image gallery)

const blankVideo = 'https://{your org id}.video-player.arcpublishing.com/assets/tiny.mp4';
const adTag = 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator=';
const powa = new PoWa({
    id: '#myPlayer',
    stream: 'https://example.com/video.mp4',

    ready: ({powa}) => {
        powa.on(PoWa.EVENTS.AD_END, () => {
            launchCrosswordPuzzle();
        })
    },
    error: console.error,

    promo: {
        image: 'https://example.com/promo.png',
    },

    ads: true,
    getAdTag: () => adTag,
});

Ad Bar

To enable the Ad Bar, currently, you’ll need to configure it via PoWaSettings.

Ad Bar

window.PoWaSettings = window.PoWaSettings || {};
window.PoWaSettings.advertising = window.PoWaSettings.advertising || {};
window.PoWaSettings.advertising.adBar = true;

Ad Bar with custom skip offset

window.PoWaSettings = window.PoWaSettings || {};
window.PoWaSettings.advertising = window.PoWaSettings.advertising || {};
window.PoWaSettings.advertising.adBar = {
    skipOffset: 5,
};