Adds a JW player video element as example (#178)

muxinc · Mar 7, 2022 · 009a6d2 · 009a6d2 · vercel · Mar 7, 2022
1 parent 98b0f86
commit 009a6d2
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 1 deletion.
diff --git a/examples/index.html b/examples/index.html
@@ -25,6 +25,7 @@ <h2>Media element examples</h2>
       <li><a href="media-elements/hls.html">HLS Media Element</a></li>
       <li><a href="media-elements/dash.html">DASH Media Element</a></li>
       <li><a href="media-elements/youtube.html">Youtube Media Element</a></li>
+      <li><a href="media-elements/jwplayer.html">JW Player Media Element</a></li>
       <li><a href="media-elements/wistia.html">Wistia Media Element</a></li>
       <li>
         <a href="media-elements/mux-video.html"

diff --git a/examples/media-elements/jwplayer.html b/examples/media-elements/jwplayer.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta name="viewport" content="width=device-width" />
+    <title>Media Chrome JW Player Media Example</title>
+    <style>
+      .examples {
+        margin-top: 20px;
+      }
+
+      media-loading-indicator {
+        --media-loading-icon-width: 100px;
+      }
+
+      media-airplay-button[media-airplay-unavailable] {
+        display: none;
+      }
+
+      media-volume-range[media-volume-unavailable] {
+        display: none;
+      }
+
+      media-pip-button[media-pip-unavailable] {
+        display: none;
+      }
+
+    </style>
+    <script type="module" src="https://unpkg.com/[email protected]/dist/jwplayer-video-element.js"></script>
+    <script type="module" src="../../dist/index.js"></script>
+  </head>
+  <body>
+    <main>
+      <h1>Media Chrome JW Player Media Example</h1>
+      <media-controller style="aspect-ratio: 16 / 9;">
+        <jwplayer-video
+          slot="media"
+          crossorigin
+          src="https://cdn.jwplayer.com/players/C8YE48zj-IxzuqJ4M.html"
+        >
+          <track
+            label="thumbnails"
+            default
+            kind="metadata"
+            src="https://assets-jpcust.jwpsrv.com/strips/C8YE48zj-120.vtt"
+          />
+        </jwplayer-video>
+        <div slot="centered-chrome" no-auto-hide>
+          <media-loading-indicator media-loading></media-loading-indicator>
+        </div>
+        <media-control-bar>
+          <media-play-button></media-play-button>
+          <media-seek-backward-button seek-offset="15"></media-seek-backward-button>
+          <media-seek-forward-button seek-offset="15"></media-seek-forward-button>
+          <media-mute-button></media-mute-button>
+          <media-volume-range></media-volume-range>
+          <media-time-range></media-time-range>
+          <media-time-display show-duration remaining></media-time-display>
+          <media-captions-button default-showing></media-captions-button>
+          <media-playback-rate-button></media-playback-rate-button>
+          <media-pip-button></media-pip-button>
+          <media-airplay-button></media-airplay-button>
+          <media-fullscreen-button></media-fullscreen-button>
+        </media-control-bar>
+      </media-controller>
+    </main>
+  </body>
+</html>
diff --git a/src/js/media-controller.js b/src/js/media-controller.js
@@ -206,7 +206,10 @@ class MediaController extends MediaContainer {
 
         // Since this isn't really "global state", we may want to consider moving this "down" to the component level,
         // probably pulled out into its own module/set of functions (CJP)
-        const url = new URL(cue.text);
+        const base = !/'^(?:[a-z]+:)?\/\//i.test(cue.text)
+          ? media.querySelector('track[label="thumbnails"]')?.src
+          : undefined;
+        const url = new URL(cue.text, base);
         const previewCoordsStr = new URLSearchParams(url.hash).get('#xywh');
         this.propagateMediaState(
           MediaUIAttributes.MEDIA_PREVIEW_IMAGE,