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 CloudFront distribution to server player scripts, so you’ll need to determine which domain to use. (e.g. https://< CloudFront hash >.cloudfront.net/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://< CloudFront hash >.cloudfront.net/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,
};