Prebid Video | Prebid Server Example with VideoJS

An example of a pre-roll ad using Prebid Server and VideoJS.

Place this code in the page header.

	
	<script async src="//acdn.adnxs.com/prebid/not-for-prod/1/prebid.js"></script>
	
	<!-- videojs -->
    <!-- use recent version of videojs to ensure proper functioning with the iOS devices -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.4.0/video-js.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.4.0/video.js"></script>
    <!-- videojs-vast-vpaid -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-vast-vpaid/2.0.2/videojs.vast.vpaid.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-vast-vpaid/2.0.2/videojs_5.vast.vpaid.min.js"></script>

    <script>
        var pbjs = pbjs || {};
        pbjs.que = pbjs.que || [];

        /* PRE-DEFINE `invokeVideoPlayer`

        Because we have no way of knowing when all the bids will be
        returned from Prebid we can't be sure that the browser will
        reach the point where `invokeVideoPlayer` is defined before
        `bidsBackHandler` fires and tries to call it.

        To prevent an "`invokeVideoPlayer` not defined" error, we
        pre-define it before we make the call to Prebid, and redefine
        it later on with the code to create the player and play the
        ad.

        In this first version, it simply stores the winning VAST to
        use later. */

        var tempTag = false;
        var invokeVideoPlayer = function(url) {
            tempTag = url;
        };

        /* Prebid video ad unit */

        var videoAdUnit = {
            code: 'video1',
            mediaTypes: {
                video: {
                    playerSize: [640, 480],
                    context: 'instream',
                    mimes: ['video/mp4'],
                    protocols: [1, 2, 3, 4, 5, 6],
                    playbackmethod: [2]
                }
            },
            bids: [{
                bidder: 'appnexus',
                params: {
                    placementId: 13232361, // Add your own placement id here.
                    video: {
                        skippable: true,
                        playback_method: ['auto_play_sound_off']
                    }
                }
            }]
        };

        pbjs.que.push(function() {

            // configure prebid to use prebid cache and prebid server  
            // make sure to add your own accountId to your s2sConfig object 
pbjs.setConfig({ cache: { url: 'https://prebid.adnxs.com/pbc/v1/cache' }, debug: true, s2sConfig: { endpoint: 'http://prebid.adnxs.com/pbs/v1/openrtb2/auction', enabled: true, accountId: 'c9d412ee-3cc6-4b66-9326-9f49d528f13e', // replace this with your account id
bidders: ['appnexus'] } }); // add your ad units to the bid request
pbjs.addAdUnits(videoAdUnit); pbjs.requestBids({ bidsBackHandler: function(bids) { var videoUrl = pbjs.adServers.dfp.buildVideoUrl({ adUnit: videoAdUnit, params: { iu: '/19968336/prebid_cache_video_adunit', cust_params: { section: 'blog', anotherKey: 'anotherValue' }, output: 'vast' } }); invokeVideoPlayer(videoUrl); } }); }); </script>

Place this code in the page body.

	
	<div class="example-video-container">
	    <video id="vid1" class="video-js vjs-default-skin vjs-big-play-centered" controls data-setup='{}' width='640' height='480'>
	        <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'/>
	        <source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm'/>
	        <source src="http://vjs.zencdn.net/v/oceans.ogv" type='video/ogg'/>
	    </video>
	</div>

	<script>
            var page_load_time;

            page_load_time = new Date().getTime() - performance.timing.navigationStart;
            console.log(page_load_time + "ms -- Player loading!");

            var vid1 = videojs('vid1');

            page_load_time = new Date().getTime() - performance.timing.navigationStart;
            console.log(page_load_time + "ms -- Player loaded!");

            function invokeVideoPlayer(url) {

                page_load_time = new Date().getTime() - performance.timing.navigationStart;
                console.log(page_load_time + "ms -- Prebid VAST url = " + url);

                /* Access the player instance by calling `videojs()` and passing
                 in the player's ID. Add a `ready` listener to make sure the
                 player is ready before interacting with it. */

                videojs("vid1").ready(function() {

                    page_load_time = new Date().getTime() - performance.timing.navigationStart;
                    console.log(page_load_time + "ms -- Player is ready!");

                    /* PASS SETTINGS TO VAST PLUGIN

                    Pass in a JSON object to the player's `vastClient` (defined
                    by the VAST/VPAID plugin we're using). The requires an
                    `adTagUrl`, which will be the URL returned by Prebid. You
                    can view all the options available for the `vastClient`
                    here:

                    https://github.com/MailOnline/videojs-vast-vpaid#options */

                    var player = this;
                    var vastAd = player.vastClient({
                        adTagUrl: url,
                        prerollTimeout: 500,
                        playAdAlways: true,
                        verbosity: 4,
                        vpaidFlashLoaderPath: "https://github.com/MailOnline/videojs-vast-vpaid/blob/RELEASE/bin/VPAIDFlash.swf?raw=true",
                        autoplay: true
                    });

                    page_load_time = new Date().getTime() - performance.timing.navigationStart;
                    console.log(page_load_time + "ms -- Prebid VAST tag inserted!");

                    player.muted(true);
                    player.play();

                    page_load_time = new Date().getTime() - performance.timing.navigationStart;
                    console.log(page_load_time + "ms -- invokeVideoPlayer complete!");

                });
            }