example PLUS HACK IN ADTAGURL IN PLAYER TEMPLATE.

muxinc · Sep 17, 2024 · 86c803e · 86c803e
1 parent 6af05ad
commit 86c803e
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 0 deletions.
diff --git a/examples/vanilla-ts-esm/public/mux-player-google-ima.html b/examples/vanilla-ts-esm/public/mux-player-google-ima.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width" />
+    <title>&lt;mux-player&gt; renditions example</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css" />
+    <link rel="stylesheet" href="./styles.css" />
+    <script type="module" src="./dist/mux-player.js"></script>
+    <script type="text/javascript" src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
+    <style>
+      mux-player {
+        display: block;
+        width: 100%;
+        margin: 1rem 0 2rem;
+        background-color: #000;
+      }
+
+      mux-player:not([audio]) {
+        aspect-ratio: 16 / 9;
+      }
+    </style>
+  </head>
+  <body>
+    <header>
+      <div class="left-header">
+        <a class="mux-logo" href="https://www.mux.com/player" target="_blank">
+          <picture>
+            <source
+              media="(prefers-color-scheme: dark)"
+              srcset="
+                https://user-images.githubusercontent.com/360826/233653989-11cd8603-c20f-4008-8bf7-dc15b743c52b.svg
+              "
+            />
+            <source
+              media="(prefers-color-scheme: light)"
+              srcset="
+                https://user-images.githubusercontent.com/360826/233653583-50dda726-cbe7-4182-a113-059a91ae83e6.svg
+              "
+            />
+            <img
+              alt="Mux Logo"
+              src="https://user-images.githubusercontent.com/360826/233653583-50dda726-cbe7-4182-a113-059a91ae83e6.svg"
+            />
+          </picture>
+        </a>
+        <h1><a href="/">Elements</a></h1>
+      </div>
+      <div class="right-header">
+        <a class="github-logo" href="https://github.com/muxinc/elements" target="_blank">
+          <img width="32" height="32" src="./images/github-logo.svg" alt="Github logo" />
+        </a>
+      </div>
+    </header>
+
+    <mux-player
+      id="muxPlayer"
+      title="Big Buck Bunny"
+      stream-type="on-demand"
+      playback-id="VcmKA6aqzIzlg3MayLJDnbF55kX00mds028Z65QxvBYaA"
+    ></mux-player>
+
+    <a href="../">Browse Elements</a>
+  </body>
+</html>
diff --git a/packages/mux-player/src/template.ts b/packages/mux-player/src/template.ts
@@ -106,6 +106,8 @@ export const content = (props: MuxTemplateProps) => html`
     exportparts="${partsListStr}"
   >
     <mux-video
+      old-adtagurl="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_ad_samples&sz=640x480&cust_params=sample_ct%3Dlinear&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator="
+      adtagurl="https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/vmap_ad_samples&sz=640x480&cust_params=sample_ar%3Dpremidpostoptimizedpodbumper&ciu_szs=300x250&gdfp_req=1&ad_rule=1&output=vmap&unviewed_position_start=1&env=vp&impl=s&cmsid=496&vid=short_onecue&correlator="
       slot="media"
       target-live-window="${props.targetLiveWindow ?? false}"
       stream-type="${getStreamTypeFromAttr(props.streamType) ?? false}"