1 files changed, 121 insertions, 0 deletions
diff --git a/javascript/videojs/sandbox/transient-button.html.example b/javascript/videojs/sandbox/transient-button.html.example
new file mode 100644
index 0000000..2006abb
--- /dev/null
+++ b/javascript/videojs/sandbox/transient-button.html.example
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Video.js Sandbox</title>
+    <link href="../dist/video-js.css" rel="stylesheet" type="text/css" />
+    <script src="../dist/video.js"></script>
+    <style>
+      article {
+        max-width: 800px;
+        margin: 0 auto;
+      }
+      .vjs-transient-button.unmute-button span::before {
+        content: "\f104";
+        font-family: "VideoJS";
+        vertical-align: middle;
+        padding-right: 0.3em;
+      }
+    </style>
+  </head>
+  <body>
+    <article>
+      <h1>Transient button demo</h1>
+      <video-js
+        id="vid1"
+        class="vjs-fluid"
+        controls
+        muted
+        preload="auto"
+        poster="https://vjs.zencdn.net/v/oceans.png"
+      >
+        <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
+        <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm" />
+        <source src="https://vjs.zencdn.net/v/oceans.ogv" type="video/ogg" />
+        <track
+          kind="captions"
+          src="../docs/examples/shared/example-captions.vtt"
+          srclang="en"
+          label="English"
+        />
+      </video-js>
+    </article>
+    <p>An unmute transient button will show after playback starts if muted.</p>
+    <p>
+      Transient buttons to skip into / credits / recap display at times defined
+      in a metadata track.
+    </p>
+    <script>
+      const player = videojs("#vid1");
+
+      player.ready(function () {
+        // Adds an unmute button that umutes and goes away when clicked
+        player.one("playing", function () {
+          if (this.muted()) {
+            const unmuteButton = player.addChild(
+              "TransientButton",
+              {
+                controlText: "Unmute",
+                position: ["top", "left"],
+                className: "unmute-button",
+                clickHandler: function () {
+                  this.player().muted(false);
+                  this.dispose();
+                },
+              },
+              player.children().indexOf(player.getChild("ControlBar"))
+            );
+            unmuteButton.show();
+          }
+        });
+
+        // A track that defines skippable parts
+        const track = player.addRemoteTextTrack({
+          src:
+            "data:text/vtt;base64," +
+            btoa(`WEBVTT
+
+      00:01.000 --> 00:10.000
+      Recap
+
+      00:15.000 --> 00:20.000
+      Intro
+
+      00:40.000 --> 00:47.000
+      Credits
+
+      `),
+          kind: "metadata",
+          label: "skip_sections",
+        }).track;
+
+        let skipButtons = [];
+
+        track.addEventListener("cuechange", function () {
+          const cue = track.activeCues[0];
+          if (cue) {
+            const skipButton = player.addChild(
+              "TransientButton",
+              {
+                controlText: `Skip ${cue.text}`,
+                position: ["bottom", "right"],
+                clickHandler: () => {
+                  player.currentTime(cue.endTime);
+                },
+                takeFocus: true,
+              },
+              player.children().indexOf(player.getChild("ControlBar"))
+            );
+            skipButtons.push(skipButton);
+            skipButton.show();
+          } else {
+            while (skipButtons.length > 0) {
+              skipButtons.shift().dispose();
+            }
+          }
+        });
+        track.mode = "hidden";
+      });
+    </script>
+  </body>
+</html>