added akamai video player (#2181)

Co-authored-by: Steve <ssuranie@appnexus.com>
prebid · Aug 12, 2020 · 71f07c7 · 71f07c7
1 parent 7afe950
commit 71f07c7
Show file tree

Hide file tree

Showing 5 changed files with 543 additions and 23 deletions.
diff --git a/_data/sidebar.yml b/_data/sidebar.yml
@@ -1349,6 +1349,14 @@
   sectionTitle:
   subgroup: 1
 
+- sbSecId: 4
+  title: '&nbsp;&nbsp;Akamai AMP'
+  link: /examples/video/instream/akamai/pb-ve-amp.html
+  isHeader: 0
+  isSectionHeader: 0
+  sectionTitle:
+  subgroup: 1
+
 - sbSecId: 4
   title: '&nbsp;&nbsp;AdPlayer.Pro'
   link: /examples/video/instream/adplayerpro/pb-ve-adplayerpro.html

diff --git a/_includes/video/pb-is-amp.html b/_includes/video/pb-is-amp.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="google-site-verification" content="_SMhyxJ4MnU9eTUQQNMUwU5W18T5tjNF7A6mumIci-A" />
+    <meta name="keywords" content="Header Bidding, Advanced Bidding, Header Bid, Pre-bid">
+    <meta name="description" content="{{page.description}}" />
+
+    <link rel="shortcut icon" type="image/png" href="/favicon.png" />
+
+
+    {% if page.head_title %}
+        <title>{{page.head_title}}</title>
+    {% else %}
+        <title>{{page.title}} for Header Bidding</title>
+    {% endif %}
+
+<!-- OneTrust Cookies Consent Notice start -->
+
+<script src="https://cdn.cookielaw.org/consent/53783db5-1614-43d4-bb1a-148e68e8c87b.js" type="text/javascript" charset="UTF-8"></script>
+<script type="text/javascript">
+function OptanonWrapper() { }
+</script>
+<!-- OneTrust Cookies Consent Notice end -->
+
+
+    <!--<link href="{{site.baseurl}}/assets/css/bootstrap.min.css" rel="stylesheet">-->
+    <!-- Latest compiled and minified Bootstrap CSS -->
+	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+    <link href="{{site.baseurl}}/assets/css/docs.min.css" rel="stylesheet">
+
+    <link rel="stylesheet" href="/assets/css/prism.css">
+	<link href="{{site.baseurl}}/assets/css/style.css" rel="stylesheet">
+
+
+	<!-- Favicons -->
+	<link href="{{site.baseurl}}/assets/images/favicon.png" rel="icon">
+	<link href="{{site.baseurl}}/assets/images/apple-touch-icon.png" rel="apple-touch-icon">
+
+	<!-- Google Fonts -->
+	<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i|Montserrat:300,400,500,700" rel="stylesheet">
+	<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,300i,400,400i,700,700i>
+	<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans+Condensed" />
+	<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
+	<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
+
+    <style>
+        #content {
+            background:{{site.header.color1}};
+            background:linear-gradient(135deg, {{site.header.color1}}, {{site.header.color2}});
+        }
+
+        .sample-player {
+            width: 604px;
+	        height: 341px;
+        }
+    </style>
+
+	<script src="{{site.baseurl}}/assets/js/prism.js"></script>
+    <script src="{{site.baseurl}}/assets/js/jquery.min.js"></script>
+    <script src="{{site.baseurl}}/assets/js/bootstrap.js"></script>
+    <script src="{{site.baseurl}}/assets/js/bootbox.min.js"></script>
+    <script src="{{site.baseurl}}/assets/js/docs.min.js"></script>
+    <script src="{{site.baseurl}}/assets/js/easing.min.js"></script>
+    <script src="{{site.baseurl}}/assets/js/main.js"></script>
+    <script type="text/javascript" src="{{site.baseurl}}/assets/js/pbjs_home.js"></script>
+
+    <!--production version of prebid.js-->
+    <script async src="//acdn.adnxs.com/prebid/not-for-prod/prebid.js"></script>
+    <script type="text/javascript" src="https://amp.akamaized.net/hosted/1.1/player.esi?apikey=prebid.org.samples"></script>
+
+    <script type="text/javascript">
+
+    	var type = "{{page.videoType}}";
+        var adTag = false;
+        var invokeVideoPlayer = function(url) {
+	        adTag = url;
+        }
+        var pbjs = pbjs || {};
+	    pbjs.que = pbjs.que || [];
+
+	    var videoAdUnit = {
+	        code: 'video1',
+	        mediaTypes: {
+	            video: {
+	                playerSize: [640, 480],
+	                context: 'instream'
+	            }
+	        },
+	        bids: [{
+	            bidder: 'appnexus',
+	            params: {
+	                placementId: 13232361, // Add your own placement id here
+	                video: {
+	                    skipppable: true,
+	                    playback_method: ['auto_play_sound_off']
+	                }
+	            }
+	        }]
+	    };
+
+	    pbjs.que.push(function() {
+	        pbjs.addAdUnits(videoAdUnit); // add your ad units to the bid request
+
+	        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>
+
+</head>
+
+<body>
diff --git a/_includes/video/pb-is-amp.html b/_includes/video/pb-is-amp.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="google-site-verification" content="_SMhyxJ4MnU9eTUQQNMUwU5W18T5tjNF7A6mumIci-A" />
+    <meta name="keywords" content="Header Bidding, Advanced Bidding, Header Bid, Pre-bid">
+    <meta name="description" content="{{page.description}}" />
+
+    <link rel="shortcut icon" type="image/png" href="/favicon.png" />
+
+
+    {% if page.head_title %}
+        <title>{{page.head_title}}</title>
+    {% else %}
+        <title>{{page.title}} for Header Bidding</title>
+    {% endif %}
+
+<!-- OneTrust Cookies Consent Notice start -->
+
+<script src="https://cdn.cookielaw.org/consent/53783db5-1614-43d4-bb1a-148e68e8c87b.js" type="text/javascript" charset="UTF-8"></script>
+<script type="text/javascript">
+function OptanonWrapper() { }
+</script>
+<!-- OneTrust Cookies Consent Notice end -->
+
+
+    <!--<link href="{{site.baseurl}}/assets/css/bootstrap.min.css" rel="stylesheet">-->
+    <!-- Latest compiled and minified Bootstrap CSS -->
+	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+    <link href="{{site.baseurl}}/assets/css/docs.min.css" rel="stylesheet">
+
+    <link rel="stylesheet" href="/assets/css/prism.css">
+	<link href="{{site.baseurl}}/assets/css/style.css" rel="stylesheet">
+
+
+	<!-- Favicons -->
+	<link href="{{site.baseurl}}/assets/images/favicon.png" rel="icon">
+	<link href="{{site.baseurl}}/assets/images/apple-touch-icon.png" rel="apple-touch-icon">
+
+	<!-- Google Fonts -->
+	<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i|Montserrat:300,400,500,700" rel="stylesheet">
+	<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,300i,400,400i,700,700i>
+	<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans+Condensed" />
+	<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
+	<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
+
+    <style>
+        #content {
+            background:{{site.header.color1}};
+            background:linear-gradient(135deg, {{site.header.color1}}, {{site.header.color2}});
+        }
+
+        .sample-player {
+            width: 604px;
+	        height: 341px;
+        }
+    </style>
+
+	<script src="{{site.baseurl}}/assets/js/prism.js"></script>
+    <script src="{{site.baseurl}}/assets/js/jquery.min.js"></script>
+    <script src="{{site.baseurl}}/assets/js/bootstrap.js"></script>
+    <script src="{{site.baseurl}}/assets/js/bootbox.min.js"></script>
+    <script src="{{site.baseurl}}/assets/js/docs.min.js"></script>
+    <script src="{{site.baseurl}}/assets/js/easing.min.js"></script>
+    <script src="{{site.baseurl}}/assets/js/main.js"></script>
+    <script type="text/javascript" src="{{site.baseurl}}/assets/js/pbjs_home.js"></script>
+
+    <!--production version of prebid.js-->
+    <script async src="//acdn.adnxs.com/prebid/not-for-prod/prebid.js"></script>
+    <script type="text/javascript" src="https://amp.akamaized.net/hosted/1.1/player.esi?apikey=prebid.org.samples"></script>
+
+    <script type="text/javascript">
+
+    	var type = "{{page.videoType}}";
+        var adTag = false;
+        var invokeVideoPlayer = function(url) {
+	        adTag = url;
+        }
+        var pbjs = pbjs || {};
+	    pbjs.que = pbjs.que || [];
+
+	    var videoAdUnit = {
+	        code: 'video1',
+	        mediaTypes: {
+	            video: {
+	                playerSize: [640, 480],
+	                context: 'instream'
+	            }
+	        },
+	        bids: [{
+	            bidder: 'appnexus',
+	            params: {
+	                placementId: 13232361, // Add your own placement id here
+	                video: {
+	                    skipppable: true,
+	                    playback_method: ['auto_play_sound_off']
+	                }
+	            }
+	        }]
+	    };
+
+	    pbjs.que.push(function() {
+	        pbjs.addAdUnits(videoAdUnit); // add your ad units to the bid request
+
+	        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>
+
+</head>
+
+<body>
diff --git a/_layouts/video_sample.html b/_layouts/video_sample.html
@@ -1,5 +1,7 @@
 {% if page.videoType == "pb-is-br" %}
 	{% include /video/pb-is-br.html %}
+{% elsif page.videoType == "pb-is-amp" %}
+	{% include /video/pb-is-amp.html %}
 {% elsif page.videoType == "pb-is-app" %}
 	{% include /video/pb-is-app.html %}
 {% elsif page.videoType == "pb-is-bc" %}
@@ -64,32 +66,32 @@
 {% include nav.html %}
 
 <div class="container bs-docs-container">
-	
+
 	<div class="row ">
-		
+
 		<div class="wrapper">
-		
+
 			<div class="col-sm-2 sidebar-expanded d-none d-md-block sidebar" id="sidebar">
-				
-				{% include left_nav.html %}							
-				
-			</div>	
-		
-		
+
+				{% include left_nav.html %}
+
+			</div>
+
+
 			<div class="col-sm-9 pb-content" markdown="1">
-			
+
 			{{ content }}
-			
+
 			{% if page.description == "Partners" %}
 				{% include partners.html %}
 			{% endif %}
-			
+
 			</div>
-				
+
 		</div>
 		<!--end wrapper-->
-	</div>	
-	<!--end row-->	
+	</div>
+	<!--end row-->
 </div>
 
 <p></p>
@@ -112,11 +114,3 @@
 </script>
 
 -->
-
-
-
-
-
-
-
-