polyfill usage

muxinc · Oct 24, 2022 · b1cd6e6 · b1cd6e6
1 parent be3d13f
commit b1cd6e6
Show file tree

Hide file tree

Showing 3 changed files with 155 additions and 1 deletion.
diff --git a/examples/index.html b/examples/index.html
@@ -27,6 +27,12 @@ <h2>Getting started</h2>
       </li>
     </ul>
 
+    <h2>Responsive Controls Examples</h2>
+    <ul>
+      <li><a href="responsive.html">Responsive Controls using Container Queries</a></li>
+      <li><a href="responsive-polyfill.html">Responsive Controls using Container Queries polyfill</a></li>
+    </ul>
+
     <h2>Media element examples</h2>
     <ul>
       <li><a href="media-elements/hls.html">HLS Media Element</a></li>

diff --git a/examples/responsive-polyfill.html b/examples/responsive-polyfill.html
@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta name="viewport" content="width=device-width" />
+    <title>Responsive Media Chrome Example</title>
+    <script type="module" src="../dist/index.js"></script>
+    <style>
+      /** add styles to prevent CLS (Cumulative Layout Shift) */
+      media-controller:not([audio]) {
+        display: block;         /* expands the container if preload=none */
+        max-width: 1280px;       /* allows the container to shrink if small */
+        aspect-ratio: 16 / 9;   /* set container aspect ratio if preload=none */
+
+        container: media-chrome / inline-size;
+      }
+      video {
+        width: 100%;      /* prevents video to expand beyond its container */
+      }
+
+      .centered-controls-overlay {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        justify-content: space-evenly;
+      }
+
+      @container (max-width: 590px) {
+        .centered-controls-overlay:not(.container-query-polyfill) {
+          display: flex;
+        }
+        media-control-bar:not(.container-query-polyfill) {
+          display: flex;
+        }
+        media-control-bar media-play-button:not(.container-query-polyfill),
+        media-control-bar media-seek-backward-button:not(.container-query-polyfill),
+        media-control-bar media-seek-forward-button:not(.container-query-polyfill) {
+          display: none;
+        }
+      }
+      @container (max-width: 420px) {
+        .centered-controls-overlay:not(.container-query-polyfill) {
+          display: flex;
+        }
+        media-control-bar:not(.container-query-polyfill) {
+          display: none;
+        }
+      }
+      @container (min-width: 590px) {
+        .centered-controls-overlay:not(.container-query-polyfill) {
+          display: none;
+        }
+        media-control-bar:not(.container-query-polyfill) {
+          display: flex;
+        }
+      }
+
+      media-controller .centered-controls-overlay {
+        align-self: stretch;
+      }
+      [slot='centered-chrome'] {
+        margin: 0 15%;
+        --media-control-hover-background: none;
+        --media-control-background: none;
+      }
+      [slot='centered-chrome']:is(media-play-button, media-seek-backward-button, media-seek-forward-button) {
+        padding: 0px;
+      }
+      [slot='centered-chrome']media-play-button {
+        width: 20%;
+      }
+      [slot='centered-chrome']:is(media-seek-backward-button, media-seek-forward-button) {
+        width: 15%;
+      }
+
+      media-loading-indicator {
+        position: absolute;
+        inset: 0;
+      }
+
+      media-airplay-button[media-airplay-unavailable],
+      media-fullscreen-button[media-fullscreen-unavailable],
+      media-volume-range[media-volume-unavailable],
+      media-pip-button[media-pip-unavailable] {
+        display: none;
+      }
+
+      .examples {
+        margin-top: 20px;
+      }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/container-query-polyfill@1/dist/container-query-polyfill.modern.js"></script>
+  </head>
+  <body>
+    <main>
+      <h1>Responsive Media Chrome</h1>
+      <media-controller>
+        <video
+          slot="media"
+          src="https://stream.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/high.mp4"
+          muted
+          crossorigin="anonymous"
+          playsinline
+        >
+          <track
+            label="thumbnails"
+            default
+            kind="metadata"
+            src="https://image.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/storyboard.vtt"
+          />
+          <track
+            label="English"
+            kind="captions"
+            srclang="en"
+            src="./vtt/en-cc.vtt"
+          />
+        </video>
+        <media-poster-image
+          slot="poster"
+          src="https://image.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/thumbnail.jpg"
+          placeholder-src="data:image/jpeg;base64,/9j/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhEPERETFhwXExQaFRERGCEYGh0dHx8fExciJCIeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh7/wAARCAASACADASIAAhEBAxEB/8QAGgABAAIDAQAAAAAAAAAAAAAAAAMEAgUGCP/EACkQAAEDAgMIAgMAAAAAAAAAAAEAAgMEBgUREgcUITFSkZTRQaEiscH/xAAYAQACAwAAAAAAAAAAAAAAAAAABQIDBv/EAB0RAAICAQUAAAAAAAAAAAAAAAABAgMFERUxwfD/2gAMAwEAAhEDEQA/AOZh2P2k/LOhq/Lf7VuPYvZxLQ6iqgXchvrxn9rpY7ojYCBU0IJ5HU3h9rU3NcGJVcVNJh2K4fDPTztlbm5reGRDhnxIzBPwkUc9RJ6dDHaLYojj2HWYeeH1nmSe1OzYXZJ54fW+ZJ7VeWrbO4SPuedpI/IOnB/TgsxJh4yIuGYu+TvAH9UXnafItWJmuTy1oZ0t7JoZ0t7Ii0InGhnS3smhnS3siIA//9k="
+        ></media-poster-image>
+        <media-loading-indicator media-loading slot="centered-chrome" no-auto-hide></media-loading-indicator>
+        <div slot="centered-chrome" class="centered-controls-overlay">
+          <media-seek-backward-button></media-seek-backward-button>
+          <media-play-button></media-play-button>
+          <media-seek-forward-button></media-seek-forward-button>
+        </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-fullscreen-button></media-fullscreen-button>
+          <media-airplay-button></media-airplay-button>
+        </media-control-bar>
+      </media-controller>
+      <div class="examples">
+        <a href="./">View more examples</a>
+      </div>
+    </main>
+  </body>
+</html>
diff --git a/examples/responsive.html b/examples/responsive.html
@@ -97,7 +97,7 @@ <h1>Responsive Media Chrome</h1>
           slot="media"
           src="https://stream.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/high.mp4"
           muted
-          crossorigin
+          crossorigin="anonymous"
           playsinline
         >
           <track