Prebid Video | Instream Example with VideoJS

An example of an instream pre-roll ad using Prebid.js and VideoJS.

Place this code in the page header.

	
	<script async src="//acdn.adnxs.com/prebid/not-for-prod/1/prebid.js"></script>
	<!-- 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 || [];
	
	
	    /* Prebid video ad unit */
	
	    var videoAdUnit = {
	        code: 'video1',
	        mediaTypes: {
	            video: {
	                playerSize: [640, 480],
	                context: 'instream'
	            }
	        },
	        bids: [{
	            bidder: 'appnexus',
	            params: {
	                placementId: 13232361,
	                video: {
	                    skippable: true,
	                    playback_method: ['auto_play_sound_off']
	                }
	            }
	        }]
	    };
	
	    pbjs.que.push(function() {
	        pbjs.addAdUnits(videoAdUnit);
	
	        pbjs.setConfig({
	            debug: true,
	            cache: {
	                url: 'https://prebid.adnxs.com/pbc/v1/cache'
	            }
	        });
	
	        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,
	                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!");
	
	        });
	    }
	
	</script>