diff options
Diffstat (limited to 'javascript/videojs/sandbox/transient-button.html.example')
| -rw-r--r-- | javascript/videojs/sandbox/transient-button.html.example | 121 |
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> |
