Prebid Video | Prebid Server Example with JW Player (Player7)

An example of a pre-roll ad using Prebid Server and JW Player (Player7).

Place this code in the page header.

	
	<script type="text/javascript" src="http://ssl.p.jwpcdn.com/player/v/7.2.4/jwplayer.js"></script>
        <script type="text/javascript">
            jwplayer.key = "YEUwUA9wRFeDcydr"; //Test Key - replace this with your own valid JWPlayer license key
        </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, enableSendAllBids: true, s2sConfig: { endpoint: 'http://prebid.adnxs.com/pbs/v1/openrtb2/auction', enabled: true, accountId: 'c9d412ee-3cc6-4b66-9326-9f49d528f13e', bidders: ['appnexus'] } }); pbjs.addAdUnits(videoAdUnit); // add your ad units to the bid request
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.

	
	<script>
            var jwPlayerInstance = jwplayer("playerContainerJW");
            invokeVideoPlayer = function(url) {
                console.log("starting player with url " + url);
                jwPlayerInstance.setup({
                    "file": "http://video-demo.appnexus.com/pbjs/JWPlayerDemo/AppNexus_Summit_Video_HighRes.mp4",
                    "width": 640,
                    "height": 480,
                    "autostart": true,
                    "mute": true,
                    "advertising": {
                        client: "vast",
                    }
                });

                jwPlayerInstance.on('beforePlay', function() {
                    jwPlayerInstance.playAd(url);
                });
            };

            if (tempTag) {
                invokeVideoPlayer(tempTag);
                tempTag = false;
            }

        </script>