summaryrefslogtreecommitdiff
path: root/javascript/videojs/sandbox/transient-button.html.example
diff options
context:
space:
mode:
Diffstat (limited to 'javascript/videojs/sandbox/transient-button.html.example')
-rw-r--r--javascript/videojs/sandbox/transient-button.html.example121
1 files changed, 0 insertions, 121 deletions
diff --git a/javascript/videojs/sandbox/transient-button.html.example b/javascript/videojs/sandbox/transient-button.html.example
deleted file mode 100644
index 2006abb..0000000
--- a/javascript/videojs/sandbox/transient-button.html.example
+++ /dev/null
@@ -1,121 +0,0 @@
-<!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>