Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  1. Single video slot HTML

    Code Block
    languagexml
    themeMidnight
    titleSingle video slot HTML
    linenumberstrue
    collapsetrue
    <!DOCTYPE HTML>
    <html lang="en-us">
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>NON SRA</title>
        <!-- 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>
         
        <!-- Loading Asynchronously -->
        <script type="text/javascript">
            Array.$constructor = function () {
                for (i = 0; i < this.length; i++) {
                    this[i] = this[i].toUpperCase();
                }
            };
        </script>
        <script type="text/javascript">
            (function () {
                var purl = window.location.href;
                var url = '//ads.pubmatic.com/AdServer/js/pwt/5890/2130'; // Update PUB_ID & PROF_ID
                var profileVersionId = '';
                if (purl.indexOf('pwtv=') > 0) {
                    var regexp = /pwtv=(.*?)(&|$)/g;
                    var matches = regexp.exec(purl);
                    if (matches.length >= 2 && matches[1].length > 0) {
                        profileVersionId = '/' + matches[1];
                    }
                }
                var wtads = document.createElement('script');
                wtads.async = true;
                wtads.type = 'text/javascript';
                wtads.src = url + profileVersionId + '/pwt.js';
                var node = document.getElementsByTagName('script')[0];
                node.parentNode.insertBefore(wtads, node);
            })();
        </script>
         
        <script type='text/javascript'>
            var googletag = googletag || {};
            googletag.cmd = googletag.cmd || [];
            var PWT = {}; //Initialize Namespace
            PWT.jsLoaded = function () { //PubMatic pwt.js on load callback is used to load GPT
                var gads = document.createElement('script');
                gads.type = "text/javascript";
                gads.async = true;
                gads.src = 'https://www.googletagservices.com/tag/js/gpt.js';
                var node = document.getElementsByTagName('script')[0];
                node.parentNode.insertBefore(gads, node);
            };
        </script>
         
        <script type="text/javascript">
            googletag.cmd.push(function () {
     
                var s2 = googletag.defineSlot('/43743431/QAVideo', [
                    [640, 480]
                ], 'Div1').addService(googletag.pubads());
                s2.setTargeting('a', [1]);
                s2.setTargeting('b', [2]);
                s2.setTargeting('c', 3);
                s2.setTargeting('d', ['a', 'b', 'c']);
                // var s2 = googletag.defineSlot('/43743431/DMDemo1', [
                //  [728, 90]
                // ], 'Div2').addService(googletag.pubads());
                // s2.setTargeting('aa', [11]);
                // s2.setTargeting('bb', [22]);
                // s2.setTargeting('dd', ['aa', 'bb', 'cc']);
                 
     
                 
                // common targetings
                googletag.pubads().setTargeting('v', 'classifieds');
                googletag.pubads().setTargeting('cpage', 'browseads');
                googletag.pubads().setTargeting('article-id', '65207');
                googletag.pubads().setTargeting('automation', '1');
                googletag.enableServices();
                if ("undefined" != typeof (PWT) && typeof (PWT.addKeyValuePairsToGPTSlots) == "function") {
                    PWT.requestBids(
                        PWT.generateConfForGPT(googletag.pubads().getSlots()),
                        function (adUnitsArray) {
                            console.log("AdUnitsArray", adUnitsArray);
                            // PWT.addKeyValuePairsToGPTSlots(adUnitsArray);
                            // googletag.display('Div1');
                            // googletag.display('Div2');
                             
                            var videoUrl = window.PWT.generateDFPURL(adUnitsArray[0], {
                                section: 'blog',
                                anotherKey: 'anotherValue'
                            });
                            invokeVideoPlayer(videoUrl);
     
                        }
                    );
                }
            });
        </script>
    </head>
    <body>
         
        <h2>OpenWrap - Prebid Video -- video.js</h2>
         
        <div class="example-video-container" id='Div1'>
             
            <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,
                        adCancelTimeout: 10000,
                        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>
    </body>
     
    </html>


  2. Single video slot without GPT

    Code Block
    languagexml
    themeMidnight
    titleSingle video slot without GPT
    linenumberstrue
    collapsetrue
    <!DOCTYPE html>
    <html>
    
    <head>
        <link rel="icon" type="image/png" href="/favicon.png">
        <meta charset="utf-8" />
        <title>OpenWrap Client-Side Video -- video.js with IMA</title>
    
        <!-- Load dependent stylesheets. -->
        <link rel="stylesheet" href="//googleads.github.io/videojs-ima/node_modules/video.js/dist/video-js.min.css" />
        <link rel="stylesheet" href="//googleads.github.io/videojs-ima/node_modules/videojs-contrib-ads/dist/videojs.ads.css" />
        <link rel="stylesheet" href="//googleads.github.io/videojs-ima/dist/videojs.ima.css" />
    
        <style type="text/css">
            body {
                font-family: sans-serif;
            }
        </style>
    
        <script type="text/javascript">
            var PWT = {};
            (function() {
                var purl = window.location.href;
                var url = '//ads.pubmatic.com/AdServer/js/pwt/156276/2146';
                var profileVersionId = '';
                if (purl.indexOf('pwtv=') > 0) {
                    var regexp = /pwtv=(.*?)(&|$)/g;
                    var matches = regexp.exec(purl);
                    if (matches.length >= 2 && matches[1].length > 0) {
                        profileVersionId = '/' + matches[1];
                    }
                }
                var wtads = document.createElement('script');
                wtads.async = true;
                //wtads.async = false;
                wtads.type = 'text/javascript';
                wtads.src = url + profileVersionId + '/pwt.js';
                var node = document.getElementsByTagName('script')[0];
                node.parentNode.insertBefore(wtads, node);
            })();
        </script>
    </head>
    
    <body>
        <h2>OpenWrap Client Side Video -- video.js + IMA</h2>
    
        <p> This example shows how to implement OpenWrap client-side Video when not using GPT or when
            constructing the OpenWrap Ad Unit array manually</p>
    
        <div class="example-video-container">
            <video id="content_video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360">
                <source src="//commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
                </source>
            </video>
        </div>
    
    
        <!-- Load dependent scripts -->
        <script src="//googleads.github.io/videojs-ima/node_modules/video.js/dist/video.min.js"></script>
        <script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
        <script src="//googleads.github.io/videojs-ima/node_modules/videojs-contrib-ads/dist/videojs.ads.min.js"></script>
        <script src="//googleads.github.io/videojs-ima/dist/videojs.ima.js"></script>
    
        <script>
            function invokeVideoPlayer(url) {
    
                var vjsOptions = {
                    autoplay: true,
                    muted: true,
                    debug: true
                }
                var player = videojs('content_video', vjsOptions);
    
                var options = {
                    id: 'content_video',
                    adTagUrl: url
                };
    
                player.muted(true);
                player.ima(options);
            }
        </script>
    
        <script>
            function ow_bids() {
                if (typeof PWT.requestBids === 'function') {
                    console.log("OpenWrap bidding starting");
                    var ow_slots = [{
                        code: "video-1", // mandatory
                        divId: "content_video", // mandatory
                        adUnitId: "/40619304/OW_Video", // mandatory: can be any string, GAM ad unit id is often used
                        adUnitIndex: "0", // mandatory
                        mediaTypes: { // mandatory
                            video: { // mandatory
                                "mimes": ["video/mp4"], // mandatory
                                "playerSize": [640, 480], // mandatory when using OpenWrap versions with Prebid 4.x and later
                                "w": 640, // Only needed for OpenWrap versions with Prebid 3.x
                                "h": 480 // Only needed for OpenWrap versions with Prebid 3.x
                            }
                        },
                        sizes: [
                            [640, 480]
                        ] // mandatory
                    }];
    
                    var start_time = new Date().getTime();
                    PWT.requestBids(
                        ow_slots,
                        function(adUnitsArray) {
                            var end_time = new Date().getTime();
                            var diff = end_time - start_time;
                            console.log("OpenWrap Time taken: " + diff.toString());
                            var videoUrl = window.PWT.generateDFPURL(adUnitsArray[0], {});
                            invokeVideoPlayer(videoUrl);
                        }
                    );
                } else {
                    setTimeout(ow_bids, 10);
                }
            }
    
            ow_bids();
        </script>
    </body>
    </html>
    
    
    


  3. Multiple video slots HTML

    Code Block
    languagexml
    themeMidnight
    titleMultiple video slot HTML
    linenumberstrue
    collapsetrue
    <!DOCTYPE HTML>
     
    <html lang="en-us">
     
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>NON SRA</title>
        <!-- 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>
     
        <!-- Loading Asynchronously -->
        <script type="text/javascript">
            Array.$constructor = function () {
                for (i = 0; i < this.length; i++) {
                    this[i] = this[i].toUpperCase();
                }
            };
        </script>
        <script type="text/javascript">
            (function () {
                var purl = window.location.href;
                var url = '//ads.pubmatic.com/AdServer/js/pwt/5890/2133';
                var profileVersionId = '';
                if (purl.indexOf('pwtv=') > 0) {
                    var regexp = /pwtv=(.*?)(&|$)/g;
                    var matches = regexp.exec(purl);
                    if (matches.length >= 2 && matches[1].length > 0) {
                        profileVersionId = '/' + matches[1];
                    }
                }
                var wtads = document.createElement('script');
                wtads.async = true;
                wtads.type = 'text/javascript';
                wtads.src = url + profileVersionId + '/pwt.js';
                var node = document.getElementsByTagName('script')[0];
                node.parentNode.insertBefore(wtads, node);
            })();
        </script>
     
        <script type='text/javascript'>
            var googletag = googletag || {};
            googletag.cmd = googletag.cmd || [];
            var PWT = {}; //Initialize Namespace
            PWT.jsLoaded = function () { //PubMatic pwt.js on load callback is used to load GPT
                var gads = document.createElement('script');
                gads.type = "text/javascript";
                gads.async = true;
                gads.src = 'https://www.googletagservices.com/tag/js/gpt.js';
                var node = document.getElementsByTagName('script')[0];
                node.parentNode.insertBefore(gads, node);
            };
        </script>
     
        <script type="text/javascript">
            googletag.cmd.push(function () {
     
                var s2 = googletag.defineSlot('/43743431/QAVideo', [
                    [640, 480]
                ], 'Div2').addService(googletag.pubads());
                s2.setTargeting('a', [1]);
                s2.setTargeting('b', [2]);
                s2.setTargeting('c', 3);
                s2.setTargeting('d', ['a', 'b', 'c']);
     
                var s1 = googletag.defineSlot('/43743431/QAVideo', [
                    [640, 480]
                ], 'Div1').addService(googletag.pubads());
                s1.setTargeting('aa', [11]);
                s1.setTargeting('bb', [22]);
                s1.setTargeting('cc', 33);
                s1.setTargeting('dd', ['aa', 'bb', 'cc']);
     
     
                // common targetings
                googletag.pubads().setTargeting('v', 'classifieds');
                googletag.pubads().setTargeting('cpage', 'browseads');
                googletag.pubads().setTargeting('article-id', '65207');
                googletag.pubads().setTargeting('automation', '1');
     
                googletag.enableServices();
     
                if ("undefined" != typeof (PWT) && typeof (PWT.addKeyValuePairsToGPTSlots) == "function") {
                    PWT.requestBids(
                        PWT.generateConfForGPT(googletag.pubads().getSlots()),
                        function (adUnitsArray) {
                            console.log("AdUnitsArray", adUnitsArray);
                            // PWT.addKeyValuePairsToGPTSlots(adUnitsArray);
                            // googletag.display('Div1');
                            // googletag.display('Div2');
     
                            var videoUrl = window.PWT.generateDFPURL(adUnitsArray[0], {
                                section: 'blog',
                                anotherKey: 'anotherValue'
                            });
                            invokeVideoPlayer(videoUrl);
                            var videoUrl1 = window.PWT.generateDFPURL(adUnitsArray[1], {
                                section: 'blog',
                                anotherKey: 'anotherValue'
                            });
                            invokeVideoPlayer1(videoUrl1);
                            PWT.addKeyValuePairsToGPTSlots(adUnitsArray);
     
                        }
                    );
                }
     
     
            });
        </script>
    </head>
     
    <!-- <body style='background-color:whitesmoke;'>
     
        <h2 style='text-align:center;'>
            NON SRA
        </h2>
     
        <br><br>
        Adslot : /43743431/DMDemo
        <br>
        <div id='Div1'>
        </div>
     
        <br><br>
        Adslot : /43743431/DMDemo1
        <br>
        <div id='Div2'>
        </div>
    </body> -->
     
    <body>
     
        <h2>OpenWrap - Prebid Video -- video.js</h2>
     
        <div class="example-video-container" id='Div2'>
     
            <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>
        <br><br>
        <div class="example-video-container" id='Div1'>
     
            <video id="vid2" 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');
            var vid2 = videojs('vid2');
     
            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,
                        adCancelTimeout: 25000,
                        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!");
     
                });
            }
     
            function invokeVideoPlayer1(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("vid2").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,
                        adCancelTimeout: 25000,
                        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>
    </body>
     
    </html>


  4. MultiSlots with banner and video inventory

    Code Block
    languagexml
    titleMultiple slot for banner and video HTML
    collapsetrue
    <!DOCTYPE HTML>
    
    <html lang="en-us">
    
    <head>
    	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
    	<title>NON SRA</title>
            <!-- 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>
    
    	<!-- Loading Asynchronously -->
    	<script type="text/javascript">
    		Array.$constructor = function () {
    			for (i = 0; i < this.length; i++) {
    				this[i] = this[i].toUpperCase();
    			}
    		};
    	</script>
    	<script type="text/javascript">
    		(function () {
    			var purl = window.location.href;
    			var url = '//ads.pubmatic.com/AdServer/js/pwt/5890';
    			var profileId = '';
    			var profileVersionId = '';
    			if (purl.indexOf('profileid=') > 0) {
    				var regexp = /profileid=(.*?)(&|$)/g;
    				var matches = regexp.exec(purl);
    				if (matches.length >= 2 && matches[1].length > 0) {
    					profileId = '/' + matches[1];
    				}
    			}
    			if (purl.indexOf('pwtv=') > 0) {
    				var regexp = /pwtv=(.*?)(&|$)/g;
    				var matches = regexp.exec(purl);
    				if (matches.length >= 2 && matches[1].length > 0) {
    					profileVersionId = '/' + matches[1];
    				}
    			}
    			var wtads = document.createElement('script');
    			wtads.async = true;
    			wtads.type = 'text/javascript';
    			wtads.src = url+profileId+profileVersionId+'/pwt.js';
    			//wtads.src = "https://test.com/Libs/OW/Video/owt.js";
    			// wtads.src = "http://test.com/Libs/OW/Video/owt_working.js";
    			var node = document.getElementsByTagName('script')[0];
    			node.parentNode.insertBefore(wtads, node);
    		})();
    	</script>
    
    	<script type='text/javascript'>
    		var googletag = googletag || {};
    		googletag.cmd = googletag.cmd || [];
    		(function () {
    			setTimeout(function () {
    				var gads = document.createElement('script');
    				gads.async = true;
    				gads.type = 'text/javascript';
    				var useSSL = 'https:' == document.location.protocol;
    				gads.src = (useSSL ? 'https:' : 'http:') +
    					'//www.googletagservices.com/tag/js/gpt.js';
    				var node = document.getElementsByTagName('script')[0];
    				node.parentNode.insertBefore(gads, node);
    			}, 250); // Adding 250ms delay to gpt.js for PubMatic script to load
    		})();
    	</script>
    
    	<script type="text/javascript">
    		googletag.cmd.push(function () {
    			
    			var s2 = googletag.defineSlot('/43743431/QAVideo', [
    				[640, 480]
    			], 'Div2').addService(googletag.pubads());
    			s2.setTargeting('a', [1]);
    			s2.setTargeting('b', [2]);
    			s2.setTargeting('c', 3);
    			s2.setTargeting('d', ['a', 'b', 'c']);
    			// var s2 = googletag.defineSlot('/43743431/DMDemo1', [
    			// 	[728, 90]
    			// ], 'Div2').addService(googletag.pubads());
    			// s2.setTargeting('aa', [11]);
    			// s2.setTargeting('bb', [22]);
    			// s2.setTargeting('dd', ['aa', 'bb', 'cc']);
    
    			var s1=googletag.defineSlot('/43743431/OpenWrapBothNativeBanner1', [['fluid'],[728, 90],[300,250],[160,600]], 'Div1').addService(googletag.pubads());
    			s1.setTargeting('a', [1]);
    			s1.setTargeting('b', [2]);
    			s1.setTargeting('c', 3);
    			s1.setTargeting('d', ['a', 'b', 'c']);		
    
    							
    			
    			
    
    			var s3=googletag.defineSlot('/43743431/DMDemo2', [[160, 600],[728,90],[300, 250]], 'Div3').addService(googletag.pubads());
    			s3.setTargeting('aaa', [111]);
    			s3.setTargeting('bbb', [222]);
    			s3.setTargeting('ddd', ['aaa', 'bbb', 'ccc']);		
    
    
    			// common targetings
    			googletag.pubads().setTargeting('v', 'classifieds');
    			googletag.pubads().setTargeting('cpage', 'browseads');
    			googletag.pubads().setTargeting('article-id', '65207');
    			googletag.pubads().setTargeting('automation', '1');
    
    			googletag.enableServices();
    
    			if ("undefined" != typeof (PWT) && typeof (PWT.addKeyValuePairsToGPTSlots) == "function") {
    				PWT.requestBids(
    					PWT.generateConfForGPT(googletag.pubads().getSlots()),
    					function (adUnitsArray) {
    						console.log("AdUnitsArray", adUnitsArray);
    						// PWT.addKeyValuePairsToGPTSlots(adUnitsArray);
    						// googletag.display('Div1');
    						// googletag.display('Div2');
    
    					    var videoUrl = window.PWT.generateDFPURL(adUnitsArray[0],{
                                            section: 'blog',
                                            anotherKey: 'anotherValue'
                                        });
                                invokeVideoPlayer(videoUrl);
    							PWT.addKeyValuePairsToGPTSlots(adUnitsArray);
    							googletag.display('Div1');
    							googletag.display('Div3');
    					}
    				);
    			}
    
    
    		});
    	</script>
    </head>
    
    <!-- <body style='background-color:whitesmoke;'>
    
    	<h2 style='text-align:center;'>
    		NON SRA
    	</h2>
    
    	<br><br>
    	Adslot : /43743431/DMDemo
    	<br>
    	<div id='Div1'>
    	</div>
    
    	<br><br>
    	Adslot : /43743431/DMDemo1
    	<br>
    	<div id='Div2'>
    	</div>
    </body> -->
    
    <body>
    
    	<h2>OpenWrap - Prebid Video -- video.js</h2>
    
    	<div class="example-video-container" id='Div2'>
    
    		<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>
    	
    	<br><br>
    	Adslot : /43743431/DMDemo
    	<br>
    	<div id='Div1'>
    	</div>
    
    	<br><br>
    	Adslot : /43743431/DMDemo1
    	<br>
    	<div id='Div3'>
    	</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,adCancelTimeout: 25000,
    					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>
    </body>
    </html>


  5. Multi-format (banner and video) single slot

    Code Block
    languagexml
    titleMulti-format banner & video HTML
    linenumberstrue
    collapsetrue
    <!DOCTYPE HTML>
     
    <html lang="en-us">
     
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>NON SRA</title>
        <!-- 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>
     
        <!-- Loading Asynchronously -->
        <script type="text/javascript">
            Array.$constructor = function () {
                for (i = 0; i < this.length; i++) {
                    this[i] = this[i].toUpperCase();
                }
            };
        </script>
        <script type="text/javascript">
            (function () {
                var purl = window.location.href;
                var url = '//ads.pubmatic.com/AdServer/js/pwt/5890/2141';
                var profileVersionId = '';
                if (purl.indexOf('pwtv=') > 0) {
                    var regexp = /pwtv=(.*?)(&|$)/g;
                    var matches = regexp.exec(purl);
                    if (matches.length >= 2 && matches[1].length > 0) {
                        profileVersionId = '/' + matches[1];
                    }
                }
                var wtads = document.createElement('script');
                wtads.async = true;
                wtads.type = 'text/javascript';
                wtads.src = url + profileVersionId + '/pwt.js';
                var node = document.getElementsByTagName('script')[0];
                node.parentNode.insertBefore(wtads, node);
            })();
        </script>
     
        <script type='text/javascript'>
            var googletag = googletag || {};
            googletag.cmd = googletag.cmd || [];
            var PWT = {}; //Initialize Namespace
            PWT.jsLoaded = function () { //PubMatic pwt.js on load callback is used to load GPT
                var gads = document.createElement('script');
                gads.type = "text/javascript";
                gads.async = true;
                gads.src = 'https://www.googletagservices.com/tag/js/gpt.js';
                var node = document.getElementsByTagName('script')[0];
                node.parentNode.insertBefore(gads, node);
            };
        </script>
     
        <script type="text/javascript">
            googletag.cmd.push(function () {
     
     
                var s1 = googletag.defineSlot('/43743431/OpenWrapBothNativeBanner1', [
                    ['fluid'],
                    [728, 90],
                    [300, 250],
                    [160, 600],
                    [640, 480]
                ], 'Div1').addService(googletag.pubads());
                s1.setTargeting('a', [1]);
                s1.setTargeting('b', [2]);
                s1.setTargeting('c', 3);
                s1.setTargeting('d', ['a', 'b', 'c']);
     
     
     
                // common targetings
                googletag.pubads().setTargeting('v', 'classifieds');
                googletag.pubads().setTargeting('cpage', 'browseads');
                googletag.pubads().setTargeting('article-id', '65207');
                googletag.pubads().setTargeting('automation', '1');
     
                googletag.enableServices();
     
                if ("undefined" != typeof (PWT) && typeof (PWT.addKeyValuePairsToGPTSlots) == "function") {
                    PWT.requestBids(
                        PWT.generateConfForGPT(googletag.pubads().getSlots()),
                        function (adUnitsArray) {
                            console.log("AdUnitsArray", adUnitsArray);
                            if (adUnitsArray[0].bidData.kvp.pwtplt == "video") {
                                var videoUrl = window.PWT.generateDFPURL(adUnitsArray[0], {
                                    section: 'blog',
                                    anotherKey: 'anotherValue'
                                });
                                invokeVideoPlayer(videoUrl);
     
                            } else {
                                PWT.addKeyValuePairsToGPTSlots(adUnitsArray);
                                googletag.display('Div1');
                            }
                        }
                    );
                }
     
     
            });
        </script>
    </head>
     
    <body>
     
        <h2>OpenWrap - Prebid Video -- video.js</h2>
     
        <div class="example-video-container" id="Div1">
     
            <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,
                        adCancelTimeout: 25000,
                        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>
    </body>
     
    </html>
    


...